Aller au contenu principal
Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration :

Slideshow CSS responsive fullscreen

Dernière modification : décembre 2022



<figure>

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

</figure>




*{box-sizing: border-box}
	
body {
	
margin: 0;
display: grid;
min-height: 100vh;
	
}
	
figure{

width: 500%;
display: flex;
animation: 20s animation_slide infinite; 

}
	
figure img{

pointer-events: none;
object-fit: cover;
width: 20%;
aspect-ratio: 16/9;
margin: auto

}

	
@keyframes animation_slide {
	
0% {transform:translatex(0)}
	
20%{transform:translatex(0)}

25%{transform:translatex(-20%)}
	
45%{transform:translatex(-20%)}

50%{transform:translatex(-40%)}
	
70%{transform:translatex(-40%)}

75%{transform:translatex(-60%)}
	
95%{transform:translatex(-60%)}

100%{transform:translatex(-80%)}
	
	}	




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.