Comment créer un diaporama avec HTML, CSS et JavaScript

Un diaporama Web est une séquence d'images ou de texte qui consiste à montrer un élément de la séquence dans un certain intervalle de temps.

Pour ce didacticiel, vous pouvez créer un diaporama en suivant ces étapes simples:

Écrivez un balisage

     Slideshow 

Écrivez des styles pour masquer les diapositives et n'afficher qu'une seule diapositive.

Pour masquer les diapositives, vous devez leur donner un style par défaut. Cela vous imposera de n'afficher qu'une seule diapositive si elle est active ou si vous souhaitez l'afficher.

 [data-component="slideshow"] .slide { display: none; } [data-component="slideshow"] .slide.active { display: block; }

Changez les diapositives dans un intervalle de temps.

La première étape pour modifier le diaporama consiste à sélectionner le ou les enveloppes de diapositives, puis ses diapositives.

Lorsque vous sélectionnez les diapositives, vous devez parcourir chaque diapositive et ajouter ou supprimer une classe active en fonction de la diapositive que vous souhaitez afficher. Ensuite, répétez simplement le processus pendant un certain intervalle de temps.

N'oubliez pas que lorsque vous supprimez une classe active d'une diapositive, vous la masquez en raison des styles définis à l'étape précédente. Mais lorsque vous ajoutez une classe active à la diapositive, vous écrasez le style display:none to display:block, de sorte que la diapositive s'affiche pour les utilisateurs.

 var slideshows = document.querySelectorAll('[data-component="slideshow"]'); // Apply to all slideshows that you define with the markup wrote slideshows.forEach(initSlideShow); function initSlideShow(slideshow) { var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Get an array of slides var index = 0, time = 5000; slides[index].classList.add('active'); setInterval( () => { slides[index].classList.remove('active'); //Go over each slide incrementing the index index++; // If you go over all slides, restart the index to show the first slide and start again if (index === slides.length) index = 0; slides[index].classList.add('active'); }, time); }

Exemple de codepen suite à ce tutoriel