Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

Simple slider CSS avec méthode input hack

Dernière modification : septembre 2022

Le code :



<div class=slideshow>

<input name="slideshow" id=slide_img1 type="radio" checked>
<nput name="slideshow" id=slide_img2 type="radio">
<input name="slideshow" id=slide_img3 type="radio">
<input name="slideshow" id=slide_img4 type="radio"> 

<ul>
<li class=img1>
<img src=image.jpg alt>
</li>
<li class=img2>
<img src=image.jpg alt>
</li>
<li class=img3>
<img src=image.jpg alt>
</li>
<li class=img4>
<img src=image.jpg alt>
</li>
</ul>

<div class=precedent>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
</div>

<div class=suivant>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
</div>

<div class=puces>
<label class="img1" for=slide_img1>
<span class=actif_puces></span>
</label>
<label class="img2" for=slide_img2>
<span class=actif_puces></span>
</label>
<label class="img3" for=slide_img3>
<span class=actif_puces></span>
</label>	
<label class="img4" for=slide_img4>
<span class=actif_puces></span>
</label>
</div>

</div>	





*,
*::after,
*::before{

box-sizing: border-box

}

img{max-width:100%;display:block}

input[type="radio"]{position:absolute;left:-100vw}

label{cursor:pointer}


.slideshow {

display: grid;
grid-template: "slider" 1fr;
place-items: center;
overflow: hidden;
max-width: 800px;
aspect-ratio:3/2;
margin:2rem auto;
	
	}
  
	
.slideshow> * {
	
grid-area: slider;

}	

	
.slideshow  ul { 

 display: flex;
}
    
.slideshow  ul  li{

min-width: 100%;
transition: transform .25s;
	
}
	
.slideshow  ul  li	img {
	
  object-fit: cover;
  width: 100%;
  height: 100%;
  user-select: none;
}

 

    
    
#slide_img1:checked ~  ul > li{transform:translatex(0%)}  
#slide_img2:checked ~  ul > li{transform: translatex(-100%)}  
#slide_img3:checked ~  ul > li{transform: translatex(-200%)}
#slide_img4:checked ~  ul > li {transform: translatex(-300%)}

 
    
/******************fleches**************************/
    
	
.precedent{	z-index:1;place-self: center left;	}
.suivant{	z-index:1;place-self: center right;}
	


.slideshow > .precedent > label,
.slideshow > .suivant > label{

display: none;
background-color:hsl(0,0%,15%);
justify-content: center;
align-content: center
	
}   
        
.slideshow > .precedent > label:after{content:'←'}
.slideshow > .suivant > label:after{content:'→'}
    
.slideshow > .precedent > label:after,
.slideshow > .suivant > label:after {
	
display: flex;
align-items: center;
font-size:2rem;
font-size:clamp(1rem, 2vw, 2rem);
color:hsl(0, 0%, 100%);

	
	}   
    

#slide_img1:checked ~ .precedent > label.img4,
#slide_img1:checked ~ .suivant > label.img2,
#slide_img2:checked ~ .precedent > label.img1,
#slide_img2:checked ~ .suivant > label.img3,
#slide_img3:checked ~ .precedent > label.img2,
#slide_img3:checked ~ .suivant > label.img4,
#slide_img4:checked ~ .precedent > label.img3,
#slide_img4:checked ~ .suivant > label.img1{
	
display:flex;
width:2rem;
height:2rem;
width:clamp(2rem, 8vw, 4rem);
height:clamp(2rem, 8vw, 4rem);
	
	}



/***************************navigation puces bas********************************/
.puces {
z-index: 1;
display: flex;
gap: 1rem;
padding: 1rem;
place-self: end center;
	
	}
    
.puces label{
	
background-color: white;
border-radius: 50%;
width: 1rem;
height: 1rem;
	
	}
/********************simulation lien actif sur les puces******************************/

	
#slide_img1:checked ~ .puces > label.img1> .actif_puces,
#slide_img2:checked ~ .puces > label.img2 > .actif_puces,
#slide_img3:checked ~ .puces > label.img3 > .actif_puces,
#slide_img4:checked ~ .puces > label.img4 > .actif_puces{
	
border-radius: inherit;	
display: flex;
height: inherit;
width: inherit;
background-color: black;
	
	}

/********************************navigation puces bas****************************/



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.