[CSS]Slide avec défilement en boucle
Réalisation d'un diaporama à défilement en boucle en utilisant les animations CSS et en définissant les étapes de cette animation (keyframes en anglais).
Le but ici est de calculer les données pour les étapes et non la réalisation proprement dite du diaporama.
Rendu
Calcul
Paramètres
CSS animation appliqué
Les valeurs en pourcentage dépendent du nombre d'images et des durées souhaitées pour l'animation.
Dans l'exemple de départ ci-dessus, le temps de pause par image est de 2 secondes, le temps de déplacement d'une image à la suivante est de 1 seconde, soit pour 4 images, on ne tient pas compte de l'image ajoutée en fin de slide, la durée de l'animation est de 12 secondes.
Chaque seconde représente donc 100% / 12 = 8.333% de l'animation.
Principe
Le principe consiste à ajouter en fin de liste la première image et une fois celle-ci affichée replacer la liste au début.