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




✔️ Support navigateurs :
Chrome | Edge | firefox | Internet Explorer | Opera | Safari | iOS Safari | UC Browser | Samsung Internet |
---|---|---|---|---|---|---|---|---|
✔️ | ❌ | ❌ | ❌ | ❌ | ✔️ | ✔️ | ❌ | ❌ |
69+ | / | / | / | / | 11-11.1+ | 11-11.4+ | / | / |
<ul class=slideshow>
<li><img src="1.jpg" alt></li>
<li><img src="2.jpg" alt></li>
<li><img src="3.jpg" alt></li>
</ul>
.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;
}