Un slider en HTML et CSS

Dans ce premier tuto, nous allons vous présenter comment réaliser un slider en HTML et CSS.

Commençons par la structure HTML

<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 :

Une première balise <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.
La seconde balise <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.
Enfin, les images : elles sont englobées dans des balises <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.

A présent, ajoutons un peu de style

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 :

Dans cet exemple, j'ai fait le choix d'afficher le slider en pleine largeur. Donc on supprime les marges appliquées par défaut à la balise <body> et on applique une largeur de 100vw à nos images.
Les images sont positionnées les unes à la suite des autres grâce à display: inline-block et on "cache" celles qui dépassent de notre cadre définit par l'élément #slider grâce à overflow: hidden.
Enfin, on applique un peu de style à nos légendes et on les positionne en bas de notre slider.

Les bases de notre slider sont posées, il faut désormais l'animer.

L'animation

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 :

On appelle tout d'abord notre animation grâce à la propriété animation-name.
Ensuite, grâce à animation-duration, on définit sa durée, ici, 20s. A noter qu'il est également possible de définir la durée en millisecondes.
Avec la propriété animation-iteration-count, on va pouvoir indiquer le nombre de fois que l'on veut voir l'animation jouée : dans notre cas, on opte pour la valeur infinite pour que le slider tourne en boucle.
animation-timing-function va nous permettre de définir la manière dont l'animation doit se dérouler, et plus précisément, sa courbe d'accélération. De multiples valeurs sont possibles : ease, linear, cubic-bezier, step, etc. Ici, nous utiliserons ease-in-out pour faire en sorte que la transition entre deux images soit lente au début et à la fin.
Enfin, la propriété animation-fill-mode nous permet de définir le style à appliquer avant et après que l'animation est jouée. En choisissant forwards, cela permet d'appliquer le style définit par la dernière étape.

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.

Et si on l'améliorait un peu ?

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 :

Tout d'abord, on change le style de nos labels lorsque l'input correspondant est coché : on change la couleur de fond et on retire les contours.
Ensuite, lorsque l'un de ces boutons est sélectionné, on supprime l'animation et on positionne notre élément #slides pour afficher la bonne image. En effet, les styles d'une animation prenant le dessus sur les autres, il n'est pas possible de simplement mettre en pause l'animation, comme nous l'avons fait précédemment, et de modifier la propriété left.
Il est néanmoins possible de "tricher" un peu : il suffit de créer une nouvelle div, vide, et de positionner les images en background. Puis, lorsque l'un des boutons est cliqué, on met l'animation en pause et on affiche cette div à la place de notre "vrai" slider.

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 😉

Retour au blog

Ajouté le : 02/01/2019 par Aurore