Slider responsive avec pseudo-classe :target

• 
• 
• 
• 

description1

description2

description3

description4

La construction du slider en HTML :

<div class="slider-css-target"> <!-- Notre conteneur global -->

<!-- Notre liste de petites images -->  
<ul>
<li><a href="#votre_id1"><img src="image.jpg" alt="description" height="" width=""></a></li> <!-- chaque lien possede un identifiant different -->
<li><a href="#votre_id2"><img src="image.jpg" alt="description" height="" width=""></a></li>
<li><a href="#votre_id3"><img src="image.jpg" alt="description" height="" width=""></a></li>
<li><a href="#votre_id4"><img src="image.jpg" alt="description" height="" width=""></a></li>
</ul>
<!-- Notre liste de petites images -->


<div class="slider-css-target-images"><!-- conteneur grandes images -->


<div class=description>

<img src="image.jpg" alt="description" height="" width="">
</div>

<div class=description>

<img src="image.jpg" alt="description" height="" width="">
</div>

<div class=description>

<img src="image.jpg" alt="description" height="" width="">
</div>

<div class=description>

<img src="image.jpg" alt="description" height="" width="">
</div>

</div><!-- fin  conteneur grandes images -->


</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 (grandes et petites images). La longueur du slider sera à définir selon vos besoins (dans notre exemple, il s'agit de 600 pixels).

   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. Nous allons également déclarer dans cet élément div la propriété overflow avec la valeur hidden. Nous verrons pourquoi juste après.

2. La navigation (petites images)

   La deuxième étape consiste à mettre en place la navigation. Dans cet exemple, il s'agit d'une liste non ordonnée avec l'élément ul. Nous plaçons chaque miniature (dans une balise img) à l'intérieur d'un élément li et d'un lien hypertexte (élément a) en attribuant un identifiant différent pour chaque lien.

   Cette étape est importante. Si vous n'attribuez pas un identifiant unique, le slider ne fonctionnera pas.

3. Le slider (grandes images)

   On ajoute un nouvel élément div qui se trouve à l'intérieur du premier div (le conteneur principal) et qui contiendra toutes les grandes photos. Nous allons utiliser le model de rendu flexbox. Ainsi, va t-on aligner les photos les unes à la suite des autres. C'est pourquoi nous avons déclaré la propriété overflow au conteneur principal, de manière à montrer une image à la fois. Sans cette propriété, nous verrions toutes les photographies.

   Nous allons ensuite déclarer dans ce nouvel élément div une longueur de 400%, correspondant aux quatre images dont la longueur pour chacune est de 100%. 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%. A cela, nous englobons nos images d'un élément div auquel nous déclarons la propriété raccourcie flex avec pour valeur 0 1 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 (600 x 400). 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. Cibler les images avec :target

   La pseudo-classe :target est très utile en CSS. Elle permet notamment de se déplacer dans une page en cliquant sur des liens. Dans cet exemple, celle-ci va nous servir à cibler nos grandes images par l'intermédiaire de la navigation avec des identifiants comme décrit dans l'étape 2. Chaque identifiant va cibler une seule et même image.

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 miniatures.

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

*{box-sizing:border-box}



.slider-css-target{

overflow-x: hidden;
max-width: 600px;
margin: auto;

	
	}

.slider-css-target ul{

margin: 1rem .5rem;
/*reset ul*/
padding: 0;
list-style-type:none;
/*reset ul*/
display:flex;
justify-content: space-between;
gap:.5rem
	}


	
	
.slider-css-target ul li a{display:block}


	
.slider-css-target ul li img{

display: block;
max-width: 100%;
width: 120px;
height: 100%;
max-height: 80px;
border: 2px solid white;
box-shadow:0 0 5px rgba(0, 0, 0, 0.3)
	
	}

.slider-css-target-images{
	
display: flex;
width: 400%;
will-change: transform;
transition: transform .4s ease-in-out
	
	}

.slider-css-target-images img {
	
display:block;
width:100%;
height:auto;
/*aspect-ratio:3/2;
object-fit: cover;*/


	
	}
#votre_id2:target ~ .slider-css-target .slider-css-target-images{
	
	transform:translate3d(-25%,0,0)
	
	}

#votre_id3:target ~ .slider-css-target .slider-css-target-images{
	
	transform:translate3d(-50%,0,0)
	
	}

#votre_id4:target ~ .slider-css-target .slider-css-target-images{
	
	transform:translate3d(-75%,0,0)
	
	}


.description{

background-color:#dbdbdb;
flex:0 1 100%;
overflow:hidden;


	}