Slider CSS Grid layout avec méthode input hack

• :checked
• aspect-ratio
• grid
• transform
• translate
• transition

La construction du slider en HTML :

<div class=slider><!-- Notre conteneur global -->

<input name="slider" id=slide_img1 type="radio" checked><!-- même nom pour tous les input / identifiant unique -->
<nput name="slider" id=slide_img2 type="radio">
<input name="slider" id=slide_img3 type="radio">
<input name="slider" id=slide_img4 type="radio"> 

<ul>
<li class=img1>
<img src=image.jpg alt height="" width="">
</li>
<li class=img2>
<img src=image.jpg alt height="" width="">
</li>
<li class=img3>
<img src=image.jpg alt height="" width="">
</li>
<li class=img4>
<img src=image.jpg alt height="" width="">
</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><!-- fin conteneur global -->	

Voici comment procéder en CSS :

1. Création du conteneur principal

   On crée un élément div qui englobe le slider. La longueur du slider sera à définir selon vos besoins (dans notre exemple, il s'agit de 720 pixels). Au lieu d'utiliser le positionnement CSS, nous allons déployer le slider avec le modèle de rendu CSS Grid layout, beaucoup plus simple.

   Nous prenons soin de placer tous nos éléments qui se trouveront à l'intérieur du conteneur avec la propriété grid-area sur la même ligne ainsi que la même rangée.

   Pour s'assurer que le conteneur global rétrécisse dans la fenêtre du navigateur (viewport), nous déclarons la propriété max-width avec la longueur souhaitée. Nous allons également déclarer dans cet élément div la propriété overflow avec la valeur hidden. Nous verrons pourquoi plus loin.

2. La navigation

   La deuxième étape consiste à mettre en place la navigation avec des élements input de type radio qui vont servir à déclencher le défilement des photos. Chaque élément input aura un identifiant unique mais posséderont tous un nom commun avec l'attribut HTML name. Ce dernier point est essentiel au bon fonctionnement du slider.

   Nous plaçons l'attribut HTML checked à l'intérieur du premier élement input. Cela signifie que la première action est enclenchée et laisse donc apparaître la première image.

3. Le slider

   A présent, nous construisons une liste non ordonnée avec l'élément ul qui contiendra nos photos. Nous allons utiliser le modèle de rendu flexbox de manière à aligner les images les unes à la suite des autres. C'est pourquoi nous avons déclaré la propriété overflow et la valeur hidden sur le conteneur principal, ceci afin de n'afficher qu'une seule image. Sans cette propriété, nous verrions toutes les photographies.

   Les éléments li de la liste étant devenus des boîtes flexibles, nous ajoutons la propriété raccourcie flex avec pour valeur 0 0 100%. De plus, ces éléments servent de conteneur aux images. Aussi, pour permettre aux éléments de la navigation d'apparaître, nous déclarons un contexte d'empilement négatif avec z-index:-1. Nous ajoutons également une transition pour donner l'effet de glissement (slide). Dans cet exemple, nous avons choisi 400ms, mais vous pouvez déterminer une durée plus ou moins longue.

   Il est toujours préférable d'ajouter une hauteur et une largeur sur l'élément img dans le code HTML. Il suffit ensuite d'ajouter les propriétés height et width en CSS respectivement à auto et 100%.

   Si vous souhaitez ajouter des images qui ont de tailles différentes et/ou au format portrait, il faudra procéder à quelques ajustements. Dans cet exemple, le ratio des images est de 3/2 (720 x 480). La propriété aspect-ratio va nous aider à respecter le rapport d'aspect. Il faudra ajouter la valeur 3/2 à l'élément img. De plus, la propriété d'image object-fit et la valeur cover va permettre de conserver ce rapport.

4. Les éléments de contrôle

   Ici, notre slider possède à la fois des flèches précédentes et suivantes ainsi que des puces. Cela signifie qu'il y a deux types de contrôle. Nous allons placer à l'intérieur de chaque type de contrôle des éléments labels qui seront associés aux éléments input que nous avons évoqués à l'étape 2.

   Nous aurons donc trois conteneurs à la suite de notre liste d'images. Un élément div contenant quatre labels pour les flèches précédentes, un élement div avec le même nombre de labels en ce qui concerne les flèches suivantes et enfin quatre autres labels contenus dans un dernier élément div pour la navigation à puces.

   Il nous faut dès lors placer tous ces éléments. Le modèle Grid layout que nous avons déclaré sur notre conteneur principal va nous y aider avec notamment la propriété raccourcie place-self. Les flèches précédentes au centre à gauche, les flèches suivantes au centre à droite et les puces au centre en bas.

   En ce qui concerne les flèches, nous les faisons toutes disparaître (avec display : none) pour faire apparaître celles dont nous avons besoin. Par exemple, sur la première image, nous laissons apparaître la flèche précédente (dernier label) qui mène à la dernière image du slider et la flèche suivante (deuxième label) qui mène à la deuxième image.

   Les puces, quant à elles, restent visibles constamment. Seul l'état visuel change pour montrer qu'une puce est activée quand nous cliquons dessus.

   Nous utiliserons la pseudo-classe :checked pour réaliser toutes ces actions. Il faudra juste porter une attention particulière aux éléments visés.

5. Transformations CSS

   Pour finir, il nous faut obtenir l'effet de slide. Nous allons utiliser pour ce faire les transformations CSS. C'est pourquoi nous allons appliquer une translation via la propriété transform sur l'axe x (ligne horizontale) qui aura pour effet de faire glisser chaque image vers la gauche ou la droite selon l'ordre dans lequel on clique sur les éléments de contrôle.

   Nous allons ensuite séparer la transition en quatre étapes de 100% jusqu'à atteindre 400%, c'est-à-dire la taille complète du conteneur qui englobe les images.

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

box-sizing: border-box

}


label{cursor:pointer}


.slider {

display: grid;
overflow: hidden;
max-width: 720px;
border-radius: 0.75rem;
margin:5rem auto;
	
	}
  
	
.slider> * {
	
grid-area: 1/1;

}	




.slider  ul { 

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

	
.slider  ul li{
z-index:-1;
flex: 0 0 100%;
transition: translate .4s;

}
	
.slider  ul  li img {
	
aspect-ratio:3/2;	
object-fit: cover;
width: 100%;
display: block;
height:auto;
user-select: none;
	
}

#slide_img2:checked ~  ul > li{translate:-100% 0}  
#slide_img3:checked ~  ul > li{translate:-200% 0}
#slide_img4:checked ~  ul > li {translate:-300% 0}
	
    
/******************fleches**************************/
    
	
.precedent{place-self: center left;	}
.suivant{place-self: center right;}
	


.slider > .precedent > label,
.slider > .suivant > label{

display: none;
background-color:#000;
justify-content: center;
align-items: center;
	
}   
        
.slider > .precedent > label::after,
.slider > .suivant > label::after{
display: block;
content:''; 
width:clamp(1.25rem,1rem + 1vw,1.75rem);
height:clamp(1.25rem,1rem + 1vw,1.75rem);
pointer-events: none;
border-top: 2px solid #fff;
	}
	
.slider > .precedent > label::after{
rotate: -45deg;
border-left: 2px solid #fff;
border-top-left-radius: 2px;		
		
	}
	
.slider > .suivant > label::after{
rotate: 45deg;
border-right: 2px solid #fff;
border-top-right-radius: 2px;
	
	}
    
.slider > .suivant label,
.slider > .precedent label{

width:clamp(3rem,1rem + 3vw,4rem);
height:clamp(3rem,1rem + 3vw,4rem);

}
    

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

	
	}



/***************************navigation puces bas********************************/
.puces {

display: flex;
gap: 1rem;
padding: 1rem;
place-self: end center;
	
	}
    
.puces label{
	
background-color: white;
border-radius: 50%;
width: 1rem;
height: 1rem;
width:clamp(1rem, 2vw, 1.5rem);
height:clamp(1rem, 2vw, 1.5rem);	
	}

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