Animation d’un slider automatique en CSS pas à pas CSS42

Préparation des fichiers de l’exercice

Créez un dossier racine à l’emplacement de votre choix.

HTML : Construisez une page HTML de base en prenant soin de l’enregistrer dans votre dossier racine.

<!doctype html><html lang="fr">    <head>        <meta charset="utf-8">        <title>Titre de la page</title>    </head>    <body>    </body></html>

HTML : Créez une feuille de style et liez-la à la page HTML.

<link  rel="stylesheet" type="text/css" href="style.css">

Récupérez trois images de votre choix pour créer le slider. Si nécessaire, recadrez-les ou redimensionnez-les afin qu’elles aient toutes les trois les mêmes dimensions. Si vous souhaitez plus d’images dans le slider, il suffira d’adapter les dimensions.

Si vous le souhaitez, vous pouvez récupérer trois images d’exemple en cliquant ci-dessous :

HTML : Créer un conteneur <div></div> avec la classe slider.

<div class="slider"></div>

HTML : À l’intérieur du conteneur principal, ajoutez un second conteneur <div></div> avec la classe slider-content.

<div class="slider">    <div class="slider-content">    </div></div>

HTML : À l’intérieur du conteneur .slider-content, insérez les trois images à l’aide de balises <img>. Veillez à ne laisser aucun espace ni retour à la ligne entre les balises afin d’éviter l’apparition d’espaces entre les images.

<div class="slider">    <div class="slider-content">      <img src="img-1.jpg"><img src="img-2.jpg"><img src="img-3.jpg">    </div></div>

CSS : Ajoutez une bordure de couleur différente pour chacun des deux conteneurs. Ces bordures sont ajoutées afin de bien visualiser ce que l’on va faire. Vous pourrez les enlever lorsque l’exercice sera terminé.

.slider {    outline: 1px solid red;}.slider-content{    outline: 1px solid blue;}

CSS : Définissez une largeur de 100% pour le conteneur principal .slider, afin qu’il occupe toute la largeur disponible dans son élément parent.

.slider {    width: 100%;    outline: 1px solid red;}

CSS : Définissez la largeur du conteneur .slider-content à 300% de celle du conteneur principal. Il doit ainsi être trois fois plus large que la zone d’affichage du slider, puisque le slider contiendra 3 images.

CSS : Définissez la largeur de chaque image à 33.333333% de celle du conteneur .slider-content. Les trois images doivent ainsi se répartir sur toute la largeur de ce conteneur.

.slider-content img {    width: 33.333333%;}

CSS : Associez à slider-content l’animation nommée slider pour une durée de 10s.

.slider-content {    outline: 1px solid blue;    width: 300%;    animation-name: slider;    animation-duration: 10s;}

CSS : Préparez les keyframes de l’animation slider avec deux étapes 0 et 100%.

@keyframes slider {  0% {  }  100% {  }}

CSS : Utilisez la propriété transform et la fonction translateX() pour déplacer horizontalement le conteneur .slider-content. À 0% de l’animation, il doit conserver sa position initiale. À 100%, il doit être déplacé vers la gauche de deux tiers de sa propre largeur, afin d’afficher la troisième image.

@keyframes slider {    0% {        transform: translateX(0);    }    100% {        transform: translateX(-66.666667%);    }}

CSS : Il est probablement temps de masquer la partie de slider-content qui déborde de slider. Pour cela, utilisez la propriété overflow sur l’élément slider. Profitez-en pour supprimer les deux bordures que nous avions mises pour visualiser nos deux conteneurs.

.slider {    width: 100%;    overflow: hidden;}.slider-content {    width: 300%;    animation-name: slider;    animation-duration: 10s;}

CSS : Utilisez la propriété animation-iteration-count pour faire en sorte que l’animation tourne en continu.

.slider-content {    width: 300%;    animation-name: slider;    animation-duration: 10s;    animation-iteration-count: infinite;}

CSS : Utilisez la propriété animation-timing-function pour avoir un mouvement continu linéaire sans accélération.

.slider-content {    width: 300%;    animation-name: slider;    animation-duration: 10s;    animation-iteration-count: infinite;    animation-timing-function: linear;}

Sur papier, décomposez les différentes étapes de l’animation.

CSS : Définissez les images clés correspondant aux étapes de l’animation que vous avez identifiées à la question précédente.

@keyframes slider {    0%, 30% {        transform: translateX(0);    }    33%, 63% {        transform: translateX(-33.333333%);    }    66%, 100% {        transform: translateX(-66.666667%);    }}

CSS : Utilisez la propriété animation-direction pour faire en sorte que l’animation se déroule dans un sens puis dans l’autre de manière alternative. Ainsi le slider doit avoir un mouvement de va-et-vient.

.slider-content {    width: 300%;    animation-name: slider;    animation-duration: 10s;    animation-iteration-count: infinite;    animation-direction: alternate; }

En observant l’animation, vous pouvez voir que la durée d’affichage des images 1 et 3 semble plus importante à cause de l’enchaînement des cycles. En effet, nous avons pour le moment le rythme suivant :

1 – 2 – 3 – 3 – 2 – 1 – 1 – 2 – 3 – 3 – 2 – 1 – 1 – 2 – etc

Ajustez donc les images clés pour que les trois images s’affichent aussi longtemps les unes que les autres sur l’animation continue en va-et-vient.

@keyframes slider {    0%, 20% {        transform: translateX(0);    }    25%, 70% {        transform: translateX(-33.333333%);    }    75%, 100% {        transform: translateX(-66.666667%);    }}