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.

Démonstration

http://exemple.com/index.html

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="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider CSS</title>
<link rel="stylesheet" href="style.min.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="https://source.unsplash.com/800x400/?water">
                        <img src="https://source.unsplash.com/800x400/?forest">
                        <img src="https://source.unsplash.com/800x400/?mountain">
                        <img src="https://source.unsplash.com/800x400/?nature">
                        <img src="https://source.unsplash.com/800x400/?field">
                    </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);
}

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.