Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Lightbox/slideshow/slider

Simple slider CSS avec méthode input hack

Code :

HTML


<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"> 
<div class="cadre-ratio">
<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>
<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>	


CSS


html{

box-sizing: border-box;

}

*,
*:after,
*:before{

box-sizing: inherit

}


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

label{cursor:pointer}


.slideshow {

display: grid;
grid-template: "slider" 1fr;
place-items: center;
place-content: center;
overflow: hidden;
max-height: clamp(600px, 80vh, 800px);
margin:2rem auto;
	
	}
  
	
.slideshow> * {
grid-area: slider;
max-width: 1200px;
}	
	
	
.cadre-ratio {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  z-index: -1;  
}
	
	
.slideshow  ul {

list-style-type: none;
padding: 0;
display: flex;

}
    
.slideshow  ul  li{

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

	
	
/*navigateurs ne supportant pas aspect-ratio*/	
 @supports not (aspect-ratio: 16 / 9) {
  .cadre-ratio ul >li::before {
    content: "";
    float: left;
    padding-top: 56.25%;
  }

  .cadre-ratio ul >li::after {
    content: "";
    display: block;
    clear: both;
  }
}   

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

 
    
/******************fleches**************************/
    
	
.precedent{place-self: center left;	}
.suivant{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;
justify-content: center;
align-items: center;
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;
--size: clamp(2rem, 8vw, 4rem);
width:var(--size);
height:var(--size);
	
	}



/***************************navigation puces bas********************************/
.puces {
display: flex;
gap: 1rem;
padding: 1rem;
place-self: end center;
	
	}
    
.puces label{
	
--size: 1rem;
background-color: white;
border-radius: 50%;
width: var(--size);
height: var(--size);
	
	}

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

Vous rencontrez un problème avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.