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