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.
- Pour afficher le code HTML, cliquez sur le bouton HTML.
- Pour afficher le code CSS, cliquez sur le bouton CSS puis sur le lien view compiled en bas de la fenêtre de code
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.
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.