En tant que développeur, vous avez certainement déjà été confronté à la création d'une galerie d'images.
Pour un débutant, cela peut rapidement virer au casse-tête. Mais comme vous êtes têtu et avez le goût du travail bien fait, vous lisez ces lignes dans l'espoir de parfaire vos compétences.
Dans cet article, nous allons étudier les différentes possibilités pour construire une galerie d'images. Du plus simple au plus complexe, vous serez en mesure de réaliser tout type de slider, slideshow ou carrousel. La seule limite : votre imagination !
La pseudo-classe :target :
Commençons avec la pseudo-classe :target. Celle-ci permet de cibler un élément afin de déclencher une action (comme on peut le faire en JavaScript). Cette méthode est un classique en CSS, mais elle a un gros inconvénient.
Comme elle se base sur les ancres, il en résulte un phénomène connu : le saut de page. Un autre problème intervient également : celui de l'historique des liens. En effet, les identifiants sont reportés dans la barre d'adresse, ce qui contraint l'internaute, s'il utilise la flèche retour du navigateur, à cliquer pour remonter tout l'historique.
Pour être plus clair, vous aurez une adresse à rallonge. Si vous avez cliqué sur des dizaines de photos, vous imaginez alors l'ampleur du problème.
Slider responsive avec pseudo-classe :target :
Le slider ci-dessous est donc construit en utilisant la pseudo-classe :target. Vous allez constater que la mise en place est assez simple.
Cette pseudo-classe s'applique à un élément ou à l'élément parent lorsque l'un de ses descendants qui peut recevoir un focus au clavier ou à la souris.
Elle est très utile pour styliser les éléments parents en fonction du focus enfant et donner ainsi un indicateur visuel à l'utilisateur, notamment dans un formulaire ou un tableau.
Attention toutefois à ne pas confondre cette pseudo-classe avec :focus ou :focus-visble. Chacune ayant leur propre spécificité.
Slider avec la pseudo-classe :focus-within
Dans ce slider, nous allons donc utiliser la pseudo-classe :focus-within afin de faire apparaître les photos.
Cette méthode comporte un avantage certain par rapport à la pseudo-classe :target. Nous n'utilisons plus l'URI pour pointer une ancre.
La conséquence : plus aucun historique de navigation et plus de saut de page !
Mais, à la base, l'élément input est utilisé pour les formulaires. Cette technique n'est donc pas une solution "naturelle". On parle alors de "hack" CSS. Néanmoins, elle fonctionne bien et permet de réaliser des actions assez complexes mais limitées (sans pour autant passer par JavaScript).
Si bien qu'au lieu d'utiliser la pseudo-classe :target ou encore la pseudo-classe :focus-within, nous allons nous orienter vers la pseudo-classe CSS :checked.
Il est à noter que celle-ci s'applique uniquement sur les élements radio, les cases à cocher (checkbox) ou encore les éléments option dans les select.
On crée un élément qui va contenir notre slider. Dans cet exemple, nous avons utilisé l'élément HTML5 figure, mais un élément div peut tout aussi bien être mis en place. Nous allons disposer cet élément avec le modèle flexbox (display : flex) afin d'aligner toutes les photos les unes à la suite des autres.
L'étape suivante va consister à calculer la longueur totale du conteneur global par rapport au nombre d'images. Dans notre exemple, il y a quatre photos à faire défiler. Nous allons donc renseigner une valeur de 500% (100% par photo) dans le conteneur figure.
Mais pourquoi 500%, alors que nous ne disposons que de quatre photos ? Ne conviendrait-il pas mieux d'écrire 400% ? Et pourquoi met-on alors cinq photos dans le conteneur ? C'est justement là que réside l'astuce...
Dans la partie HTML, il nous faut replacer la première photographie à la fin du diaporama pour donner l'illusion de défilement infini. Sans cela, le défilement va se couper brutalement et revenir au début. Nous aurons donc la même photographie deux fois dans notre code HTML.
Ceci fait, il faut maintenant créer une animation CSS qui va permettre le défilement automatique. Ce n'est pas très compliqué. Nous avons cinq images. Nous allons donc découper l'animation en cinq étapes. Chaque 20 %, une nouvelle image va effectuer un glissement (slide). Pour déterminer ensuite la durée totale de l'animation, il suffit de donner une durée à chaque photo et de multiplier celle-ci par cinq. Dans cet exemple, 5 x 4s = 20 secondes.
Enfin, pour que votre diaporama soit compatible avec les mobiles, nous allons nous servir de la propriété CSS object-fit sur l'élément img, indiquer une largeur en pourcentage de 20% et appliquer la propriété (aspect-ratio). Celle-ci va se charger de calculer le ratio à adopter.
Le module CSS Scroll Snap introduit les positions d'accroche lors du défilement garantissant ainsi la position sur laquelle on arrive après avoir fait défiler du contenu.
