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

Julien Crego

8 novembre 2025

Cet exercice pas à pas est destiné à vous guider lors de la création d’un slider automatique d’images animées 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.

Voici la structure de base d’une page HTML.

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

    </body>
</html>

<!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.

Le code ci-dessous doit être placé dans l’en-tête <head> de la page HTML. Il est nécessaire de personnaliser la valeur de l’attribut href afin qu’elle corresponde à l’emplacement et au nom du fichier CSS à lier.

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

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

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 :

Images d’exemple

Préparation du slider

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

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

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

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

HTML : À l’intérieur du second conteneur, ajoutez les trois images les unes à la suite des autres sans aucune espace entre les images.

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

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

CSS : 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é.

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

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

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

.slider {
    border: 1px solid red;
    width: 900px;
    height: 400px;
}

.slider {    border: 1px solid red;    width: 900px;    height: 400px;}

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

.slider-content {
    border: 1px solid blue;
    width: 2700px;
    height: 400px;
    animation-name: slider;
    animation-duration: 10s;
}

.slider-content {    border: 1px solid blue;    width: 2700px;    height: 400px;    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% {
  }
}

@keyframes slider {  0% {  }  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.

.slider-content {
    border: 1px solid blue;
    width: 2700px;
    height: 400px;
    position: relative;
    animation-name: slider;
    animation-duration: 10s;
}

.slider-content {    border: 1px solid blue;    width: 2700px;    height: 400px;    position: relative;    animation-name: slider;    animation-duration: 10s;}

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).

@keyframes slider {
  0% {
    left: 0px;
  }
  100% {
    left: -1800px;
  }
}

@keyframes slider {  0% {    left: 0px;  }  100% {    left: -1800px;  }}

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.

.slider {
    width: 900px;
    height: 400px;
    overflow: hidden;
}
.slider-content {
    width: 2700px;
    height: 400px;
    position: relative;
    animation-name: slider;
    animation-duration: 10s;
}

.slider {    width: 900px;    height: 400px;    overflow: hidden;}.slider-content {    width: 2700px;    height: 400px;    position: relative;    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: 2700px;
    height: 400px;
    position: relative;
    animation-name: slider;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.slider-content {    width: 2700px;    height: 400px;    position: relative;    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: 2700px;
    height: 400px;
    position: relative;
    animation-name: slider;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.slider-content {    width: 2700px;    height: 400px;    position: relative;    animation-name: slider;    animation-duration: 10s;    animation-iteration-count: infinite;    animation-timing-function: linear;}

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.

Affichage en pause sur l’image 1.
Défilement jusqu’à l’image 2.
Affichage en pause sur l’image 2.
Défilement jusqu’à l’image 3.
Affichage en pause sur l’image 3.

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% {
    left: 0px;
  }
  30% {
    left: 0px;
  }
  33% {
    left: -900px;
  }
  63% {
    left: -900px;
  }
  66% {
    left: -1800px;
  }
  100% {
    left: -1800px;
  }
}

@keyframes slider {  0% {    left: 0px;  }  30% {    left: 0px;  }  33% {    left: -900px;  }  63% {    left: -900px;  }  66% {    left: -1800px;  }  100% {    left: -1800px;  }}

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: 2700px;
    height: 400px;
    position: relative;
    animation-name: slider;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate; 
}

.slider-content {    width: 2700px;    height: 400px;    position: relative;    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% {
    left: 0px;
  }
  20% {
    left: 0px;
  }
  25% {
    left: -900px;
  }
  70% {
    left: -900px;
  }
  75% {
    left: -1800px;
  }
  100% {
    left: -1800px;
  }
}

@keyframes slider {  0% {    left: 0px;  }  20% {    left: 0px;  }  25% {    left: -900px;  }  70% {    left: -900px;  }  75% {    left: -1800px;  }  100% {    left: -1800px;  }}

Solution complète de l’exercice

Voici la solution complète, la plus épurée possible, en deux fichiers. Le fichier HTML contient la structure et le fichier CSS la mise en forme. Les images utilisées font toutes les trois 900 pixels de large.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Slider automatique</title>
        <link rel="stylesheet" href="style.css">
    </head>

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

<!doctype html><html lang="fr">    <head>        <meta charset="UTF-8">        <title>Slider automatique</title>        <link rel="stylesheet" href="style.css">    </head>    <body>        <div class="slider">            <div class="slider-content">                <img src="img-1.jpg"><img src="img-2.jpg"><img src="img-3.jpg">            </div>        </div>    </body></html>

.slider {
    margin: auto; 
    width: 900px;
    height: 533px;
    overflow: hidden;
  }
  .slider-content {
    width: 2700px;
    height: 533px;
    position: relative;
    animation-name: slider;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
  }
  @keyframes slider {
    0% {
      left: 0px;
    }
    20% {
      left: 0px;
    }
    25% {
      left: -900px;
    }
    70% {
      left: -900px;
    }
    75% {
      left: -1800px;
    }
    100% {
      left: -1800px;
    }
  }

.slider {    margin: auto;     width: 900px;    height: 533px;    overflow: hidden;  }  .slider-content {    width: 2700px;    height: 533px;    position: relative;    animation-name: slider;    animation-duration: 10s;    animation-iteration-count: infinite;    animation-direction: alternate;    animation-timing-function: linear;  }  @keyframes slider {    0% {      left: 0px;    }    20% {      left: 0px;    }    25% {      left: -900px;    }    70% {      left: -900px;    }    75% {      left: -1800px;    }    100% {      left: -1800px;    }  }

Sauf mention contraire*, l’article Animation d’un slider automatique 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.

Commentaires

S’abonner

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.

8 Commentaires

Le plus ancien

Le plus récent Le plus populaire

Commentaires en ligne

Afficher tous les commentaires

franck

3 années il y a

Bonjour, je me forme au html css, en attendant que ma formation commence et je trouve votre site très bien fait. Je recherchais des exercices, tuto etc… pour en apprendre d’avantage chaque jours. Merci.

Répondre

Julien Crego

Auteur

Répondre à franck

3 années il y a

Merci pour vos encouragements 🙂

Répondre

qi98

Répondre à Julien Crego

1 année il y a

Ca a l’air très bien, mais je me demande pourquoi ça fonctionne bien ici ?

J’ai pourtant fait un coller/copier de ce qui est donné, mais il n’y a pas d’animation, les images sont en colonne !

Vous pourriez m’expliquer parce que je trouve super cette action ?

Cordialement,
Jean-Luc

Répondre

Julien Crego

Auteur

Répondre à qi98

1 année il y a

J’ai mis un peu de temps à répondre, mais je vous ai ajouté le code complet à la fin de l’exercice.

Répondre

Julien Crego

Auteur

Répondre à Julien Crego

1 année il y a

Si les images sont en colonnes, c’est très probablement que votre CSS ne se charge pas, il faudrait vérifier le lien vers le fichier CSS dans l’en-tête de la page.

Répondre

qi98

Répondre à Julien Crego

1 année il y a

Je l’ai fait, mais les 3 images que j’aie faites, s’affichent en ligne et en même temps, glissent vers la gauche puis reviennent quelques secondes plus tard.

Maintenant est de savoir pourquoi ?

Répondre

Julien Crego

Auteur

Répondre à qi98

1 année il y a

il semble que le cadre de visionnage soit mal réglé ! Si les trois images font 3000 pixels de large, la zone d’affichage doit faire 1000px.

Répondre

Camille

2 années il y a

Merci pour ce petit tuto super bien fait ! 🙂

Répondre