Slide — GUJ

Tenho um slide de background. Estou com um problema na duração de aparição das imagens. Tipo, vai mudando as imagens e tal, quando termina de carregar a imagem, ela já começa a carregar a próxima. Como faço pra ficar um tempo parado na imagem carregada antes de seguir para a próxima? Obs: Se aumento o tempo de duração da animação, ele aumenta o tempo entre a transição entre as imagens. Segue meu código abaixo: .slide{ width: 100%; height: 100vh; background-position: center center; background-size: cover; background-repeat: no-repeat; backface-visibility: hidden; animation: slidebg 80s infinite 0s; animation-timing-function: linear; }

1 Resposta

Jelson1 14 de mai. de 2020

Com base nesse artigo eu criei esse exemplo:

tempo de transição: 1s
tempo de pausa: 6s

Como são 5 imagem o tempo de pausa é 5•6 = 30s
Como são 6 transições, 1↝2↝3↝4↝5↝1 o tempo é 6•1= 6s (obs: está em um loop).

O tempo total da Animação: 36s;

Tempo de pausa em (%): 6/36 • 100= 16.66%;
Tempo de transição em (%): 1/36 • 100 = 2.77%.

Tendo como base esses valores, vai somando:
tempo de pausa + tempo de transição.

<!DOCTYPE html>
<html>
	<head>
		<title>teste</title>
		<style>
			.exemplo{
				width:60%;
				height:200px;
				background-color:red;
				animation-name: slide;
				animation-duration: 36s;
				animation-iteration-count:infinite;
				animation-timing-function:linear;
			}
			@keyframes slide{
				0%,16.66%{
					background-color:red;
				}
				19.43%,36.09%{
					background-color:blue;
				}
				38.86%,55.52%{
					background-color:green;
				}
				58.29%,74.95%{
					background-color:yellow;
				}
				77.72%,100%{
					background-color:black;
				}
			}
		</style>
	</head>
	<body>
		<div class="exemplo"></div>
	</body>
</html>

Se você quiser mudar o tempo de transição, pausa ou a duração completa da Animação, terá que refazer os calculos, então essa talvez não seria a melhora abordagem. Se você conhece o framework Bootstrap, dá uma olhada nesse site:
https://getbootstrap.com.br/docs/4.1/components/carousel/

1 Resposta

Topicos relacionados