Slider d'images en pur CSS

Cet article vous présente le code pour la mise en place d’un slider en pur CSS.

Démonstration

Testez le slider ci-dessous en cliquant sur les carrés pour faire défiler les images.

Quelques explications

Positionnement des images

Les images sont placées dans un conteneur qui utilise le système Grid avec l’option grid-auto-flow: column; qui permet d’ajouter une colonne dans la grille pour chaque image ajoutée. Les images sont donc positionnées côte à côte sur une seule ligne de la grille.

Principe de la pseudo-classe :target

Les liens utilisent le principe d’ancres nommées, c’est à dire que la référence hypertextuelle du lien pointe vers l’attribut id d’un élément. La référence hypertextuelle se présente sous la forme #id-de-l-element et lorsque l’on clique sur ce type de lien, la référence s’ajoute à la fin de l’URL dans le champ adresse du navigateur sous la forme https://www.demo.com/page.html#ide-de-l-element.

La pseudo classe :target permet ensuite de manipuler un élément dès que son id est présent dans le champ adresse du navigateur.

Imbrication d’ids

Dans la mesure où je souhaite faire défiler l’élément avec l’attribut id="slider-content", pour les 5 images, j’ajoute des parents successifs à slider-content avec un id correspondant à chacune des images.

Le code

Code HTML

<!doctype html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slider CSS</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="slider">
        <div class="slider-viewport">
          <div id="img1">
            <div id="img2">
              <div id="img3">
                <div id="img4">
                  <div id="img5">
                    <div class="slider-content">
                      <img src="images/img01.jpeg">
                      <img src="images/img02.jpeg">
                      <img src="images/img03.jpeg">
                      <img src="images/img04.jpeg">
                      <img src="images/img05.jpeg">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="slider-nav">
          <a href="#img1"></a>
          <a href="#img2"></a>
          <a href="#img3"></a>
          <a href="#img4"></a>
          <a href="#img5"></a>
        </div>
      </div>

</body>

</html>

<!doctype html><html lang="fr"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Slider CSS</title>  <link rel="stylesheet" href="style.css"></head><body>    <div class="slider">        <div class="slider-viewport">          <div id="img1">            <div id="img2">              <div id="img3">                <div id="img4">                  <div id="img5">                    <div class="slider-content">                      <img src="images/img01.jpeg">                      <img src="images/img02.jpeg">                      <img src="images/img03.jpeg">                      <img src="images/img04.jpeg">                      <img src="images/img05.jpeg">                    </div>                  </div>                </div>              </div>            </div>          </div>        </div>        <div class="slider-nav">          <a href="#img1"></a>          <a href="#img2"></a>          <a href="#img3"></a>          <a href="#img4"></a>          <a href="#img5"></a>        </div>      </div></body></html>

Code CSS

body {
  background-color: #1e1f26;
}

.slider {
  width: 800px;
  margin: 30px auto;
  position: relative;
}

.slider-viewport {
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.slider-content {
  display: grid;
  grid-auto-flow: column;
  -webkit-transition: 1s all;
  transition: 1s all;
}
.slider-content img {
  width: 800px;
  height: 400px;
}

.slider-nav {
  position: absolute;
  width: 100%;
  bottom: -30px;
  margin-top: 10px;
  text-align: center;
}
.slider-nav a {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
          box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
  display: inline-block;
  background-color: #adafbc;
  width: 15px;
  height: 15px;
  margin: 0 3px;
}
.slider-nav a:hover {
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.8);
          box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.8);
}

#img2:target .slider-content {
  -webkit-transform: translateX(-800px);
          transform: translateX(-800px);
}

#img3:target .slider-content {
  -webkit-transform: translateX(-1600px);
          transform: translateX(-1600px);
}

#img4:target .slider-content {
  -webkit-transform: translateX(-2400px);
          transform: translateX(-2400px);
}

#img5:target .slider-content {
  -webkit-transform: translateX(-3200px);
          transform: translateX(-3200px);
}

body {  background-color: #1e1f26;}.slider {  width: 800px;  margin: 30px auto;  position: relative;}.slider-viewport {  width: 800px;  height: 400px;  overflow: hidden;}.slider-content {  display: grid;  grid-auto-flow: column;  -webkit-transition: 1s all;  transition: 1s all;}.slider-content img {  width: 800px;  height: 400px;}.slider-nav {  position: absolute;  width: 100%;  bottom: -30px;  margin-top: 10px;  text-align: center;}.slider-nav a {  -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);          box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);  display: inline-block;  background-color: #adafbc;  width: 15px;  height: 15px;  margin: 0 3px;}.slider-nav a:hover {  background-color: #fff;  -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.8);          box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.8);}#img2:target .slider-content {  -webkit-transform: translateX(-800px);          transform: translateX(-800px);}#img3:target .slider-content {  -webkit-transform: translateX(-1600px);          transform: translateX(-1600px);}#img4:target .slider-content {  -webkit-transform: translateX(-2400px);          transform: translateX(-2400px);}#img5:target .slider-content {  -webkit-transform: translateX(-3200px);          transform: translateX(-3200px);}

Sauf mention contraire*, l’article Slider d’images en pur CSS 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.

2 Commentaires

Le plus ancien

Le plus récent Le plus populaire

Commentaires en ligne

Afficher tous les commentaires

Anthony

2 années il y a

Bonjour monsieur,

Merci pour les explications !
J’aimerai bien savoir comment faire pour que lorsque que l’on click sur les boutons de navigation que le haut de la page ne se colle pas à l’image.
Merci encore !

Répondre

Julien Crego

Auteur

Répondre à Anthony

Bonjour Anthony,
Ce comportement est lié au fait que le système full CSS se base sur le principe des ancres nommées… Il ajouter des marges pour que les images ne soit pas collées en haut de la fenêtre mais il y aura toujours un déplacement potentiel si le haut de l’image n’est pas visible à l’écran.