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.

  • 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

Consulter le code de « Image slider pure CSS » par Julien Crego (@crego) sur CodePen.

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

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.