Dans ce premier tuto, nous allons vous présenter comment réaliser un slider en HTML et CSS.
<div id="slider">
<div id="slides">
<figure id="slide1">
<img src="img/image1.jpg" alt="Une première image">
<figcaption>Une première image</figcaption>
</figure>
<figure id="slide2">
<img src="img/image2.jpg" alt="Une deuxième image">
<figcaption>Une deuxième image</figcaption>
</figure>
<figure id="slide3">
<img src="img/image3.jpg" alt="Une troisième image">
<figcaption>Une troisième image</figcaption>
</figure>
</div>
</div>
La structure est relativement simple :
<div>
(#slider
) représente le slider en lui-même. Pour faire une comparaison, prenons une visionneuse de pellicule photo : il s'agit ici de la fenêtre au travers de laquelle nous pourrons voir l'image en cours.<div>
(#slides
) représente la pellicule en elle-même : elle contient plusieurs images, placées les unes à la suite des autres. C'est elle qui va "défiler" pour que les images puissent être visibles à tour de rôle.<figure>
, ce qui va nous permettre de leur associer une légende grâce aux balises <figcaption>
Pensez à bien renseigner les attributs alt des balises <img>
: c'est le texte de remplacement qui va s'afficher au cas où, pour une raison ou une autre, l'image ne peut pas s'afficher. C'est également ce texte qui va être lu par les lecteurs d'écran, et c'est un élément indispensable pour le SEO.
body {
margin: 0;
}
#slider {
position: relative;
max-width: 100%;
overflow: hidden;
height: 400px;
}
#slides {
position: absolute;
top: 0;
left: 0;
display: flex;
max-height: 100%;
}
#slides figure {
display: inline-block;
width: 100vw;
max-height: 100%;
margin: 0;
}
#slides figure img {
width: 100%;
/*Centrer l'image verticalement si celle-ci ne peut être affichée totalement*/
position: relative;
top: 50%;
transform: translateY(-50%);
}
#slides figure figcaption {
position: absolute;
bottom: 0;
padding: 2.5em 0;
text-align: center;
width: inherit;
background-color: rgba(0,0,0,0.5);
color: white;
}
Regardons ensemble ces lignes :
<body>
et on applique une largeur de 100vw
à nos images.display: inline-block
et on "cache" celles qui dépassent de notre cadre définit par l'élément #slider
grâce à overflow: hidden
.Les bases de notre slider sont posées, il faut désormais l'animer.
Pour animer notre slider, plusieurs possibilités s'offrent à nous : utiliser la propriété CSS transition ou la règle @keyframes. C'est cette dernière que nous allons utiliser ici : en effet, celle-ci offre l'avantage de définir les différentes étapes qui vont composer notre animation.
@keyframes slide {
0%, 20%, 100% {
left: 0; /*1ère image*/
}
35%, 50% {
left: -100vw; /*2ème image*/
}
70%, 95% {
left: -200vw; /*3ème image*/
}
}
On déclare donc ici notre animation slide, qui va se charger de modifier la position de l'élément auquelle elle va s'appliquer au fil des différentes étapes.
N.B. : Il est également possible d'utiliser from et to à la place des étapes 0% et 100%.
A présent, il nous faut appeler notre animation sur notre élément #slides :
#slides {
/*... Code précédent ...*/
/*CSS3 keyframes animation*/
animation-name: slide;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
Détaillons ensemble ces quelques lignes :
Il est possible d'utiliser la propriété raccourcie animation pour définir tous ces paramètres, ce qui donnerait ceci :
#slides {
animation: slide 20s infinite ease-in-out forwards;
}
Notre slider est désormais fonctionnel ! Il va de manière automatique afficher tour à tour chacune des images.
Tout d'abord, ajoutons la possibilité de mettre le slider en pause au survol de celui-ci :
#slides:hover {
animation-play-state: paused; /* Mise en pause de l'animation */
}
Et... c'est tout ! La propriété animation-play-state peut prendre deux valeurs : running et paused. Ici, on utilise la seconde qui permet, comme son nom l'indique, de mettre en pause l'animation puis de la relancer depuis l'état dans laquelle elle se trouvait.
Allons encore un peu plus loin : et si on permettait à l'utilisateur de naviguer d'une image à l'autre ? C'est parti !
Tout d'abord, ajoutons quelques éléments à notre code HTML :
<div id="slider">
<input type="radio" id="show_slide1" name="slider_commands">
<input type="radio" id="show_slide2" name="slider_commands">
<input type="radio" id="show_slide3" name="slider_commands">
<div id="slides">
<!-- Suite du code -->
</div>
<nav>
<ul class="dots_commands">
<li><label for="show_slide1">Slide 1</label></li>
<li><label for="show_slide2">Slide 2</label></li>
<li><label for="show_slide3">Slide 3</label></li>
</ul>
</nav>
</div>
Ces trois boutons radios vont nous permettre de switcher entre les différentes images. Pour que le rendu soit plus esthétique, ils seront cachés et nous utiliserons les labels, que nous allons styliser un peu :
.dots_commands {
position: absolute;
bottom: 0;
width: 100vw;
padding:0;
margin: 0;
text-align: center;
}
.dots_commands li {
display: inline;
padding: 0;
margin: 0;
}
.dots_commands label {
position: relative;
display: inline-block;
height:8px; width: 8px;
margin: 0 5px;
text-indent: -9999px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
cursor: pointer;
}
input[type="radio"] {
display: none;
}
A présent, occupons-nous de leur fonctionnement :
input[type="radio"]#show_slide1:checked ~ nav .dots_commands li:nth-of-type(1) label,
input[type="radio"]#show_slide2:checked ~ nav .dots_commands li:nth-of-type(2) label,
input[type="radio"]#show_slide3:checked ~ nav .dots_commands li:nth-of-type(3) label {
outline: none;
background: dodgerblue;
}
input[type="radio"]#show_slide1:checked ~ div#slides {
animation: none;
left: 0;
}
input[type="radio"]#show_slide2:checked ~ div#slides {
animation: none;
left: -100vw;
}
input[type="radio"]#show_slide3:checked ~ div#slides {
animation: none;
left: -200vw;
}
Voyons ensemble ce que font ces lignes :
Nos boutons sont fonctionnels : l'utilisateur peut, au clic, passer d'une image à l'autre. En revanche, ainsi, l'animation est stoppée et il n'est pas possible de la relancer. Nous allons donc ajouter un bouton "Play".
Côté HTML d'abord :
<div id="slider">
<!-- Nos autres boutons radio -->
<input type="radio" id="play_slider" name="slider_commands">
<div id="slides">
<!-- Les slides -->
</div>
<nav>
<ul class="dots_commands">
<!-- Code précédents -->
</ul>
<label for="play_slider" aria-label="Play" id="play" title="Play">Play</label>
</nav>
</div>
On utilise ici le même principe que pour nos précédents boutons : une balise <input type="radio">, et son label associé.
Côté CSS à présent :
#play {
position: absolute;
cursor: pointer;
bottom: 2em;
right: 2em;
width: 0;
height: 0;
border-top: 1em solid transparent;
border-bottom: 1em solid transparent;
border-left: 1em solid rgba(255,255,255,0.7);
display: none;
text-indent: -9999px;
}
On a quelque peu stylisé notre bouton, en lui donnant la forme d'un triangle, et, comme précédemment, on "cache" également le texte grâce à la propriété text-indent, qui nous permet en fait de décaler le texte suffisamment pour qu'il soit en dehors de la zone visible.
On aurait pu, au lieu de "cacher" le texte du label, ne pas en mettre. Cependant, cela va à l'encontre des bonnes pratiques en terme d'accessibilité Web définies par le W3C.
Par défaut, comme vous pouvez le voir, ce bouton est caché. On ne va l'afficher que lorsque l'animation est arrêtée (donc, lorsque l'utilisateur a utilisé l'un des autres boutons radio) :
input[type="radio"]:not(:nth-last-of-type(1)):checked ~ nav label#play {
display: block;
}
Enfin, au clic sur notre bouton "Play", on redémarre notre animation :
input[type="radio"]#play:checked ~ div#slides {
animation-name: slide;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
Nous voici arrivés à la fin de ce premier tuto ! Vous pouvez retrouver le code source sur CodePen
N'hésitez pas à aller consulter la doc pour obtenir plus d'infos sur les propriétés utilisées ici, et les différentes valeurs qu'elles peuvent prendre.
À vous de jouer maintenant 😉
Ajouté le : 02/01/2019 par Aurore
Suggestion d'articles et de cours dans les mêmes catégories que "Un slider en HTML et CSS" :