Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

Slideshow CSS avec indicateur de temps

Dernière modification : septembre 2022




<div class="slideshow">

<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">
<img src="image4.jpg" alt="">
<img src="image5.jpg" alt="">

<div class=indicateur></div>

</div>




*{box-sizing: border-box}

img{max-width:100%}


.slideshow{

position: relative;
max-width: 600px;
aspect-ratio: 3/2;
border-radius: .75rem;
overflow: hidden;

}
		

			
.slideshow img {
top: 0;
left: 0;
animation: slideshow 25s ease infinite;
position: absolute;
opacity: 0;
}
	
	
@keyframes slideshow {
  
0%{opacity: 0}

10%{opacity: 1}

20%{opacity: 1}

25%{opacity: 0}

100%{opacity: 0}
}

	
.slideshow img:nth-child(2) {
	
  animation-delay: 5s;
	
}
	
.slideshow img:nth-child(3) {
	
  animation-delay: 10s;
}
	
.slideshow img:nth-child(4) {
	
  animation-delay: 15s;
	
}
		
.slideshow img:nth-child(5) {
	
  animation-delay: 20s;
}	
		
.indicateur{
	
width:100%;
height: 6px;
background: rgba(255, 255, 255, 0.52);
position: absolute;
bottom: 0;
transform-origin: left;
animation: indication 5s ease infinite; 
    
}
		
@keyframes indication{

from{
	
transform:scalex(0);

	}

to{

transform:scalex(100%)

}
           
}




Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.