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




Code :
HTML
<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>
CSS
.galerie {
width: 600px;
max-width: 100%;
max-height:398px;
margin: auto;
display: flex;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory
}
.galerie img {
align-self: center; /*pour le responsive*/
scroll-snap-align: center
}
.ancre {
margin: 1rem auto;
display: flex;
justify-content: center;
}
.ancre li{
display: inline-flex;
justify-content: center;
align-items:center;
width: 30px;
height: 30px;
background: #404040;
border-radius: 50%;
}
.ancre li a{color:white}
.ancre li:not(:last-child){
margin-right: 30px;
}
Support navigateurs :
Vous rencontrez un problème avec cette démonstration ?
Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.