-
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.
