[JS-CSS]Diaporama en quelques lignes de code
Réalisation d'un slide avec seulement quelques lignes de code JavaScript et en manipulant le DOM.
Pour le défilement on utilise les animations CSS et ce en définissant les étapes de cette animation (keyframes en anglais).
Cette page est la « suite » de l'approche faite lors de la réalisaton de : Diaporama en 3 lignes de code.
Le principe
Tous les éléments sont positionnés en absolu, et placés en haut à gauche, à l'exception du premier qui doit rester dans le flux. Sans action c'est le dernier élément qui est affiché/visible.
Suivant l'action, avant/arrière, on déplace, « physiquement » dans le DOM, le premier, ou le dernier, élément en fin, ou en début, de conteneur.
En gros si l'on avance, bouton ▶, on déplace le premier élément du conteneur en fin de conteneur, c'est ce que fait la méthode Element.append().
Si l'on recule, bouton ◀, on déplace le dernier élément du conteneur en début du conteneur, c'est ce que fait la méthode Element.prepend().
Le reste n'est qu'une question de CSS.
Diaporama #1
Diaporama #2
Le JavaScript utile
Et pour l'initialisation des boutons :
Le CSS au grand complet
La structure HTML du diaporama
<div id="diapo" class="carrousel diapo-cadre">
<figure>
<img src="../images/image_001.jpg" alt=""><figcaption>Image #1</figcaption>
</figure>
<figure>
<img src="../images/image_002.jpg" alt=""><figcaption>Image #2</figcaption>
</figure>
<figure>
<img src="../images/image_003.jpg" alt=""><figcaption>Image #3</figcaption>
</figure>
<figure>
<img src="../images/image_004.jpg" alt=""><figcaption>Image #4</figcaption>
</figure>
<figure>
<img src="../images/image_005.jpg" alt=""><figcaption>Image #5</figcaption>
</figure>
</div>
<p>
<button data-diapo="diapo" data-action="left" title="Slide à gauche">◀</button>
<button data-diapo="diapo" data-action="right" title="Slide à droite">▶</button>
</p>