Créer un carrousel d'images avec Javascript

Étape 1 : Structurer le Carrousel avec du HTML

Création de la structure HTML de base

Créons une div principale pour le conteneur du carrousel. Ajoutons des img ou des éléments div pour chaque image.

• Exemple de code HTML :

  
  <div class="carousel">
      <div class="carousel-item active">
          <img src="image1.jpg" alt="Image 1">
      </div>
      <div class="carousel-item">
          <img src="image2.jpg" alt="Image 2">
      </div>
     </div>
      <div class="carousel-item">
          <img src="image3.jpg" alt="Image 3">
      </div>
  </div>
  
  

• Préparation des images

Dans un dossier, on vient y placer nos images en JPEG. On n’y place autant qu’on dispose d’image.

A voir : Apprends à manipuler les dates en PHP

Étape 2 : Styliser le Carrousel avec CSS

Appliquer des styles CSS au carrousel d’images.

Tout d’abord, on définit les dimensions du carrousel. Pour que les images s’ajustent au conteneur. On utilise la propriété position pour gérer les éléments.

• Code en CSS :

  css
  .carousel {
    display: flex;
    width: 90vw;
    margin: auto;
    position: relative;
  }
  .carousel-item {
    transition: opacity 0.5s ease-in-out;
    position: absolute;
    width: auto;
    height: auto;
  }
  
  .carousel-item img {
    object-fit: cover;
  }
  .carousel-item.active {
    opacity: 1;
  }
  
  .carousel-item:not(.active) {
    opacity: 0;
  }

A voir : Créer son extension WordPress : suivez le guide !

Étape 3 : On ajoute le code du Carrousel avec JavaScript

Écriture du script du carrousel en JavaScript

L’idée, c’est de créer une fonction pour changer l’image visible. Puis ajouter des boutons ou des indicateurs pour naviguer entre les images. Et ajouter un cycle automatique qui change les images toutes les 3s.

• Le code du script en Javascript :

  
  //on defini des variables 
  // on vient "ecouter la classcarousel-item"
  const items = document.querySelectorAll('.carousel-item'); 
  // on initialise l'item a 0 
  let currentItem = 0;
  // on determine le nombre d'items ayant le nom de la class carousel-item 
  const totalItems = items.length;
  
  function showNextItem() {
      items[currentItem].classList.remove('active');
      currentItem = (currentItem + 1) % totalItems;
      items[currentItem].classList.add('active');
  }
  
  setInterval(showNextItem, 3000);
  
  

A voir : Coder une Navbar en HTML et CSS: Guide pratique.

et hop le résultat: