Votre navigateur ne supporte pas cette démonstration.
Démonstration expérimentale. Sur Chrome Canary 108+, tapez dans la barre d'adresse: chrome://flags, puis tapez : Experimental Web Platform features et passez la valeur à enabled.
1
2
3
Le code :
<div class="section">
<div class="controles precedent" aria-label="précédent">
<svg viewBox="0 0 1024 1024">
<path d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z" p-id="10915"/>
</svg>
</div>
<div class="controles suivant" aria-label="suivant">
<svg viewBox="0 0 1024 1024">
<path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="10760"/>
</svg>
</div>
<div class="slider-contenu">
<div class=article>
<img src="image-1.jpg" alt loading="lazy">
</div>
<div class=article>
<img src="image-2.jpg" alt loading="lazy">
</div>
<div class=article>
<img src="image-3.jpg" alt loading="lazy">
</div>
</div>
<div class="pagination">
<div class="nombre" style="toggle-trigger: slides set 1">1</div>
<div class="nombre" style="toggle-trigger: slides set 2">2</div>
<div class="nombre" style="toggle-trigger: slides set 3">3</div>
</div>
</div>
*,*::before,*::after{box-sizing: border-box}
img{display: block;max-width: 100%}
.section {
margin: 4rem auto;
position: relative;
max-width: 600px;
aspect-ratio: 3/2;
display: grid;
grid-template-areas: "slider";
toggle-root: slides 3 at 1 cycle-on;
}
.section *{grid-area: slider}
.controles {
align-self: center;
z-index: 1;
padding: 5px 10px;
user-select: none;
cursor: pointer;
}
.suivant {
justify-self: end;
toggle-trigger: slides next;
}
.precedent {
toggle-trigger: slides prev;
}
.slider-contenu {
overflow: hidden;
display: flex;
border-radius: 10px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.article {
flex: 0 0 100%;
transition: transform 0.3s ease-out;
transform: translateX(var(--x, 0));
}
.article:nth-of-type(1):toggle(slides 1),
.article:nth-of-type(1):toggle(slides 1) ~ .article {
--x: 0%;
}
.article:nth-of-type(1):toggle(slides 2),
.article:nth-of-type(2):toggle(slides 2),
.article:nth-of-type(2):toggle(slides 2) ~ .article,
.article:nth-of-type(3):toggle(slides 3),
.article:nth-of-type(3):toggle(slides 3) ~ .article{
--x: -100%;
}
.article:nth-of-type(3):toggle(slides 3),
.article:nth-of-type(2):toggle(slides 3),
.article:nth-of-type(1):toggle(slides 3) {
--x: -200%;
}
:toggle(slides 1) ~ .pagination .nombre:nth-of-type(1),
:toggle(slides 2) ~ .pagination .nombre:nth-of-type(2),
:toggle(slides 3) ~ .pagination .nombre:nth-of-type(3) {
background-color: #fff;
color: #333;
transform: scale(1.3);
}
.controles svg {
width: 64px;
height: 64px;
fill: #fff;
transition: background 0.3s;
border-radius: 9999px;
padding: 6px 0;
}
.controles svg:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.pagination {
align-self:end;
justify-self: center;
display: flex;
margin-bottom:1rem;
gap: 1rem;
z-index: 1;
user-select: none;
}
.pagination .nombre {
width: 1rem;
height:1rem;
border-radius: 50%;
color: transparent;
background-color: transparent;
transition: 0.3s;
cursor: pointer;
font-size: 75%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}