Aller au contenu principal
Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration :

CSS Toggles Slider

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.

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




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.