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

Slider responsive CSS Scroll Snap

Dernière modification : août 2022

Ce simple slider responsive et avec contrôle est construit en utilisant les propriétés du module CSS Scroll Snap.



<div class="galerie">

<img id="slide1" src="image1.jpg" alt>
<img id="slide2" src="image2.jpg" alt>
<img id="slide3" src="image3.jpg" alt>
<img id="slide4" src="image4.jpg" alt>

</div>	

<ul class="ancre">
<li><a href="#slide1">1</a></li>
<li><a href="#slide2">2</a></li>
<li><a href="#slide3">3</a></li>
<li><a href="#slide4">4</a></li>
</ul>




.galerie {

max-width: 600px;
aspect-ratio:3/2;
margin: 2rem auto;
display: flex;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; 
border-radius: 5px;

}

.galerie img {

scroll-snap-align: center;
min-width: 100%
	
}

.ancre {

display:flex;
justify-content: center

}
	
.ancre li a{
	
display: flex;
justify-content: center;
align-items:center;
width: 30px;
height: 30px;
background: #404040;
border-radius: 50%;
text-decoration: none; 
color: white;
margin: 0 10px 0 10px;}
	
	
	
.ancre li a:hover {
 background: #838181;
}





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.