Cette exercice pas à pas est destiné à vous guider lors de la création d’un slider d’images animé en CSS.
Consignes de l’exercice
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.
HTML : Créez une feuille de style et liez-la à la page HTML.
Récupérer trois images de votre choix pour la création du slider et veillez à les recadrer et/ou redimensionner pour qu’elles aient toutes les trois les mêmes dimensions.
Si vous le souhaitez, vous pouvez récupérer trois images d’exemple en cliquant ci-dessous :
Préparation du slider
HTML : Créer un conteneur <div></div>
avec la classe slider
.
HTML : À l’intérieur du conteneur principal, ajoutez un second conteneur <div></div>
avec la classe slider-content
.
HTML : À l’intérieur du second conteneur, ajoutez les trois images les unes à la suite des autres sans aucune espace entre les images.
Afficher la solution HTMLCSS : Ajoutez une bordure de couleur différente pour chacun de 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é.
Afficher la solution CSSCSS : Dimensionnez le conteneur principal avec les dimensions des images (900×400 si vous utilisez les images d’exemple). Le conteneur secondaire, qui contient les trois images, doit déborder de son propre conteneur.
Afficher la solution CSSCSS : Dimensionnez le conteneur secondaire, afin qu’il ait la hauteur d’une image et la largeur des trois images cumulées.

Mise en place de l’animation
Le slider est prêt pour être animé. Le principe étant d’avoir un élément mobile slider-content
qui va se déplacer latéralement à l’intérieur d’un élément fixe slider
.
L’élément slider
va être réglé pour que tout le contenu qui déborde soit invisible pour l’utilisateur.
CSS : Associez à slider-content
l’animation nommée slider pour une durée de 10s.
CSS : Préparez les keyframes de l’animation slider
avec deux étapes 0 et 100%.
CSS : Nous allons effectuer le mouvement en utilisant un simple positionnement relatif. Réglez donc l’élément slider-content
afin qu’il soit positionné en relatif.
CSS : En utilisant les keyframes, réglez la position de slider-content
à 0 pixel de la droite au temps 0% et à x pixels de la droite au temps 100%. Où x correspond à la largeur de deux images (et pas de trois).
Réglage de l’animation
Pour le moment nous avons bien une animation qui se lance, mais il va falloir la régler plus précisément.
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.
CSS : Utilisez la propriété animation-iteration-count
pour faire en sorte que l’animation tourne en continu.
CSS : Utilisez la propriété animation-timing-function
pour avoir un mouvement continu linéaire sans accélération.
Affinage des keyframes
Nous avons pour le moment un mouvement continu. Nous souhaiterions que notre slider défile tout en s’arrêtant un instant sur chaque image.
Sur papier, décomposez les différentes étapes de l’animation.
Afficher la solutionCSS : Définissez les images clés correspondant aux étapes de l’animation que vous avez identifiées à la question précédente.
Afficher la solution CSSCSS : 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.
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.
Afficher la solution CSSSauf mention contraire*, l'article Animation d’un slider en CSS pas à pas [CSS42] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.