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

1ère étape

Débutons par le code 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 ajoutons les deux images, dans deux classes slides différentes.

Puis, nous ajoutons deux ronds en bas des images, et deux boutons pour pouvoir changer de slide.

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;
}

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;
}

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');
}

Tout se passe grâce à la variable slideIndex, c’est elle qui va gérer l’ensemble de nos slides et celles que nous allons afficher.