Créer un diaporama d'images

Découvrons ensemble comment réaliser un diaporama d'images simple et efficace avec HTML, CSS et JavaScript !

1ère étape

Pour commencer, utilisons un peu de HTML !

<div class="container">
  <div class="slides">
    <img src="https://zupimages.net/up/20/51/7ada.jpg" style="width:100%">
  </div>

  <div class="slides">
    <img src="https://zupimages.net/up/20/51/cdrk.jpg" style="width:100%">
  </div>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span>
</div>

Nous commençons par ajouter deux images dans des éléments div séparés, chacun ayant la classe "slides". Chaque image est définie avec une balise img dont l'attribut src pointe vers l'URL de l'image, et un style width:100% pour s'assurer que les images s'adaptent à la largeur du conteneur.

Ensuite, nous ajoutons deux boutons interactifs avec les classes "prev" et "next", chacun associé à une fonction JavaScript plusSlides() via l'attribut onclick. Ces boutons permettent de naviguer entre les différentes diapositives (ou slides) en les faisant défiler vers l'avant ou vers l'arrière.

Enfin, nous plaçons deux petits cercles en bas des images pour indiquer la diapositive active. Ces cercles sont créés à l'aide de la balise <span> avec la classe "dot". Chaque cercle est également lié à une fonction JavaScript currentSlide() qui permet de passer directement à la diapositive correspondante lorsqu'on clique dessus.

2ème étape

Stylisons maintenant les slides.

.container {
  max-width: 1000px;
  margin: auto;
  position: relative;
}

.slides {
  display: none;
}

On va ici styliser la classe .container, qui englobe les deux images et les deux boutons.

3ème étape

Stylisons les boutons.

.prev,
.next {
  cursor: pointer;
  color: white;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  padding: 16px;
  border-radius: 0 3px 3px 0;
  background: rgba(0, 0, 0, .5);
  transition: all .3s;
}

Les classes .prev et .next sont utilisées pour styliser les boutons de navigation du diaporama, permettant à l'utilisateur de passer d'une diapositive à une autre. Le code commence par définir le curseur de la souris comme un pointeur lorsqu'il survole les boutons, ce qui indique qu'ils sont cliquables. Le texte des boutons est en blanc, pour une meilleure visibilité sur le fond sombre.

Les boutons sont positionnés de manière absolue par rapport à leur conteneur parent, ce qui permet de les placer précisément où l'on souhaite à l'intérieur de ce conteneur. Ils sont centrés verticalement à l'aide de top: 50%, puis ajustés avec transform: translate(0, -50%) pour être parfaitement alignés au centre vertical.

Un espacement interne de 16 pixels (padding: 16px) est ajouté autour des boutons, augmentant ainsi la surface cliquable. Le code applique également un arrondi sur les coins des boutons (border-radius: 0 3px 3px 0), créant une forme visuellement agréable avec les coins droits arrondis. Le fond des boutons est défini comme semi-transparent noir (background: rgba(0, 0, 0, .5)), ce qui les rend visibles sans masquer complètement le contenu derrière eux. Enfin, une transition de 0,3 seconde est appliquée à tous les changements d'état des boutons (transition: all .3s), ce qui donne un effet d'animation fluide lorsque ces états changent, par exemple lors du survol ou du clic.

4ème étape

Occupons-nous des boutons de façon plus spécifique.

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background: rgba(0, 0, 0, .8);
}

Ici, on stylise plus précisément le bouton .next, à droite et on donne un effet de transparence quand le curseur passe dessus avec la pseudo-classe hover.

5ème étape

Créons maintenant les ronds en bas du diaporama.

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  margin: 10px 2px 0 2px;
  display: inline-block;
  background: #ddd;
  transition: all .3s;
}

.active,
.dot:hover {
  background: #717171;
}

La classe .dot est utilisée pour styliser les petits cercles indicateurs situés en bas du diaporama, qui permettent à l'utilisateur de naviguer directement vers une diapositive spécifique. Tout d'abord, le curseur de la souris se transforme en pointeur lorsqu'il survole ces cercles, signalant qu'ils sont interactifs. Les cercles sont définis avec une hauteur et une largeur de 15 pixels, et sont entièrement arrondis grâce à border-radius: 50%, ce qui leur donne une forme parfaitement circulaire.

Chaque cercle est espacé des autres par une marge (margin: 10px 2px 0 2px), avec plus d'espace en haut pour les séparer des éléments du dessus. Les cercles sont affichés en ligne avec les autres, en utilisant display: inline-block. Leur couleur de fond est initialement définie en gris clair (background: #ddd). Une transition de 0,3 seconde est appliquée à tous les changements d'état (transition: all .3s), créant un effet d'animation fluide lors des interactions.

Lorsqu'un cercle est actif, c'est-à-dire lorsqu'il correspond à la diapositive actuellement affichée, ou lorsqu'il est survolé par la souris, sa couleur de fond change pour un gris plus foncé (background: #717171), indiquant visuellement à l'utilisateur quelle diapositive est sélectionnée ou sur quel cercle il pointe.

6ème étape

Passons au code JavaScript.

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

Le JavaScript va permettre de gérer le diaporama entre les deux images au moment du clic sur les boutons.

7ème étape

Continuons en nous occupons de la fonction qui permettra d'afficher les slides.

function showSlides(n) {
  let slides = document.getElementsByClassName('slides');
  let dots = document.getElementsByClassName('dot');
  
  if(n > slides.length) { slideIndex = 1 }
  
  if(n < 1 ) { slideIndex = slides.length }
  
  // Cacher toutes les slides
  for(let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  
  // Retirer "active" de tous les points
  for(let i = 0; i < dots.length; i++) {
    dots[i].classList.remove('active');
  }
  
  // Afficher la slide demandée
  slides[slideIndex - 1].style.display = 'block';
  
  // Ajouter "active" sur le point cliqué
  dots[slideIndex - 1].classList.add('active');
}

La fonction showSlides(n) gère l'affichage du diaporama et la mise à jour des indicateurs (cercles). Elle récupère toutes les diapositives et les cercles, puis ajuste l'indice slideIndex pour le maintenir dans les limites du nombre de diapositives. Ensuite, elle cache toutes les diapositives et désactive tous les cercles. Enfin, elle affiche la diapositive sélectionnée et active le cercle correspondant, marquant ainsi visuellement la diapositive en cours.