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 :
-
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émentdiv
la propriétéoverflow
avec la valeurhidden
. Nous verrons pourquoi juste après. -
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 baliseimg
) à l'intérieur d'un élémentli
et d'un lien hypertexte (élémenta
) 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.
-
Le slider (grandes images)
On ajoute un nouvel élément
div
qui se trouve à l'intérieur du premierdiv
(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 de400%
, correspondant aux quatre images dont la longueur pour chacune est de100%
. Ajoutons également une transition pour donner l'effet de glissement (slide). Dans cet exemple, nous avons choisi400ms
, 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ésheight
etwidth
en CSS respectivement àauto
et100%
. A cela, nous englobons nos images d'un élémentdiv
auquel nous déclarons la propriété raccourcieflex
avec pour valeur0 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 valeur3/2
à l'élémentimg
. De plus, la propriété d'imageobject-fit
et la valeurcover
va permettre de conserver ce rapport. -
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. -
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'à atteindre100%
, 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;
}