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;
}