Comment créer un curseur d'image avec JavaScript pour améliorer votre site Web

Vous est-il déjà arrivé de souhaiter intégrer un ensemble d'images ou de vidéos dans une section de votre page web, tout en optimisant l'espace disponible ? Ou peut-être cherchez-vous à ajouter une touche d'interactivité et de dynamisme à vos pages ?

Dans ce cas, un carrousel d'images peut être la solution idéale. Cet article explore la notion de carrousel d'images, les prérequis nécessaires à sa création et les étapes pour en concevoir un en utilisant HTML, JavaScript et CSS.

Qu'est-ce qu'un carrousel d'images ?

Les carrousels, également connus sous le nom de sliders ou diaporamas, permettent d'afficher une série de contenus, qu'il s'agisse de textes, d'images ou de vidéos. Cet article se concentrera plus particulièrement sur les carrousels d'images. Les développeurs web les utilisent fréquemment sur les pages d'accueil pour mettre en avant les offres ou informations clés.

Voici quelques raisons pour lesquelles l'utilisation de carrousels peut s'avérer judicieuse pour vos pages web :

Amélioration de l'expérience utilisateur : Une page web idéale doit être concise, évitant aux utilisateurs de devoir scroller indéfiniment pour accéder aux informations essentielles. Si vous avez de nombreuses images, le carrousel permet d'éviter un défilement fastidieux, en présentant le contenu de manière organisée et progressive.
Attrait visuel : Il est difficile de retenir l'attention des utilisateurs avec une page web statique et uniforme. L'ajout de carrousels et d'animations peut dynamiser la présentation et rendre votre site plus captivant.
Gain d'espace : Afficher un grand nombre d'images (une vingtaine par exemple) peut rapidement encombrer votre page. Un carrousel permet de gagner de l'espace tout en assurant un accès facile à chaque image.
Affichage de contenu dynamique : Les carrousels peuvent être utilisés pour mettre en avant des contenus dynamiques, tels que les flux de réseaux sociaux, des extraits de blogs ou des actualités.

Prérequis pour la création d'un carrousel d'images

Notions de base en HTML : Vous devez être familier avec les balises HTML, les classes et les divs, car nous allons définir la structure de base du carrousel.
Notions de base en CSS : Le CSS est indispensable pour mettre en forme notre carrousel et ses boutons.
Notions de base en JavaScript : Le JavaScript nous permettra de rendre le carrousel interactif.
Un éditeur de code : Choisissez l'éditeur de votre choix. Pour cet exemple, nous utiliserons Visual Studio Code.
Une collection d'images : Rassemblez les images que vous souhaitez intégrer dans votre carrousel.

Mise en place du dossier de projet

Il est nécessaire de créer un dossier pour votre projet, un sous-dossier pour les images, ainsi que les fichiers HTML, CSS et JavaScript. Dans cet exemple, nous nommerons le projet "Image-Slider". Vous pouvez créer ces éléments manuellement ou utiliser les commandes suivantes :

mkdir Image-Slider

cd Image-Slider

mkdir Images && touch index.html styles.css script.js

Placez toutes vos images dans le dossier "Images" créé dans le dossier du projet, puis passez à l'étape suivante.

Voici un exemple de structure de projet, où nous avons ajouté six images qui serviront à créer le carrousel. L'ensemble du code HTML sera contenu dans le fichier index.html.

Types de carrousels d'images

Il existe deux principaux types de carrousels d'images : les carrousels automatiques et les carrousels automatiques avec boutons de navigation.

#1. Carrousel d'images automatique

Un carrousel automatique fait défiler les images de manière autonome, après un intervalle de temps prédéfini (par exemple, 3 secondes).

Code HTML

Voici un exemple de code HTML :

 <div id="slider">
    <div class="slide">
        <h2>Afrique</h2>
      <img src="Images/img1.jpg" alt="Image d'Afrique">
    </div>
    <div class="slide">
        <h2>Amérique</h2>
      <img src="Images/img2.jpg" alt="Image d'Amérique">
    </div>
    <div class="slide">
        <h2>Asie</h2>
      <img src="Images/img3.jpg" alt="Image d'Asie">
    </div>
    <div class="slide">
        <h2>Monde Arabe</h2>
      <img src="Images/img4.jpg" alt="Image du monde arabe">
    </div>
    <div class="slide">
        <h2>Moderne</h2>
      <img src="Images/img5.jpg" alt="Image d'architecture moderne">
    </div>
    <div class="slide">
        <h2>Europe</h2>
      <img src="Images/img6.jpg" alt="Image d'Europe">
    </div>
  </div>

  <script src="script.js"></script>

De ce code, il est important de noter :

Le fichier CSS est importé dans la section <head> du fichier index.html.
Le code JavaScript est ajouté juste avant la balise </body>.
Chaque diapositive est contenue dans une balise <div> avec la classe slide.
Les images sont importées via la balise <img>, avec un attribut alt descriptif.

Mise en forme du carrousel automatique via CSS

Maintenant que les fichiers CSS et HTML sont liés, nous pouvons mettre en forme le carrousel. Ajoutez le code suivant à votre fichier CSS :

#slider {
    width: 80%;
  }
  
  .slide {
    width: 80%;
    display: none;
    position: relative;
  }
  
  .slide img {
    width: 80%;
    height: auto; /* Changed from 80% */
  }
  
  .slide.active {
    display: block;
  }

De ce code, on peut retenir :

La largeur et la hauteur du carrousel sont définies à 80%.
La classe slide.active permet d'afficher uniquement la diapositive active, tandis que les autres sont masquées.
La hauteur de l'image est mise à "auto" pour conserver le ratio de l'image.

Rendre le carrousel interactif avec JavaScript

Ajoutez ce code à votre fichier script.js:

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
  slides[currentSlide].className="slide";
  currentSlide = (currentSlide+1)%slides.length;
  slides[currentSlide].className="slide active";
}

Ce code JavaScript a les fonctionnalités suivantes:

La fonction document.querySelectorAll sélectionne tous les éléments avec la classe slide.
La variable currentSlide est initialisée à 0.
La variable slideInterval est définie sur 2000 (2 secondes), ce qui signifie que les images du carrousel changent toutes les 2 secondes.
Le code slides[currentSlide].className='slide'; retire la classe active de la diapositive actuelle.
Le code currentSlide = (currentSlide + 1) % slides.length; incrémente l'index de la diapositive actuelle, en utilisant l'opérateur modulo pour assurer un défilement cyclique.
Le code slides[currentSlide].className='slide active'; ajoute la classe active à la diapositive actuelle, la rendant visible.

Le carrousel automatique fonctionne donc comme suit :

Le carrousel que nous avons créé défile automatiquement toutes les 2 secondes. Nous pouvons maintenant créer un carrousel où les utilisateurs ont la possibilité de naviguer manuellement en cliquant sur des boutons, tout en conservant un défilement automatique toutes les 3 secondes si l'utilisateur n'interagit pas avec les boutons.

Code HTML

Vous pouvez modifier votre fichier index.html avec le code suivant :

<div class="container">

        <div class="mySlides">
            <img src="Images/img1.jpg" style="width:100% ; height:50vh" alt="Image 1">
        </div>
      
        <div class="mySlides">
            <img src="Images/img2.jpg" style="width:100% ; height:50vh" alt="Image 2">
        </div>
      
        <div class="mySlides">
            <img src="Images/img3.jpg" style="width:100% ; height:50vh" alt="Image 3">
        </div>
      
        <div class="mySlides">
            <img src="Images/img4.jpg" style="width:100% ; height:50vh" alt="Image 4">
        </div>
      
        <div class="mySlides">
            <img src="Images/img5.jpg" style="width:100% ; height:50vh" alt="Image 5">
        </div>
      
      
        <a class="prev" onclick="plusSlides(-1)">❮</a>
        <a class="next" onclick="plusSlides(1)">❯</a>
      
        <div class="caption-container">
          <p id="caption"></p>
        </div>
      
        <div class="row">
          <div class="column">
            <img class="demo cursor" src="Images/img1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Vignette 1">
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Vignette 2">
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Vignette 3">
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Vignette 4">
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Vignette 5">
          </div>
          
        </div>
      </div>
	<script src="script.js"></script>

Ce code HTML fonctionne comme suit:

La classe mySlides contient les cinq images du carrousel.
Deux boutons, prev et next, avec des événements onClick permettent de naviguer entre les diapositives.
Une série de vignettes sont affichées en bas de la page web.

Code CSS

Ajoutez le code suivant à votre fichier CSS:

* {
  box-sizing: border-box;
}

.container {
  position: relative;
}

.mySlides {
  justify-content: center;
  display:none;
}

.cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: rgb(34, 143, 85);
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

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

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.caption-container {
  text-align: center;
  background-color: orangered;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

Le code CSS fonctionne comme suit :

La propriété display de la classe .mySlides est définie sur none, ce qui masque toutes les diapositives par défaut.
L'opacité des vignettes est mise à 1 au survol de la souris avec la règle .demo:hover {opacity: 1;}.

Code Javascript

let slideIndex = 1;
showSlides(slideIndex);

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

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

let slideInterval = setInterval(() => {
  plusSlides(1);
}, 3000);

let slideshowContainer = document.getElementsByClassName('container')[0];
slideshowContainer.addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
});

slideshowContainer.addEventListener('mouseleave', () => {
  slideInterval = setInterval(() => {
    plusSlides(1);
  }, 3000);
});


function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

Le code JavaScript fait ce qui suit :

La fonction currentSlide avec la valeur d'affichage définie sur none. Cette règle permet à notre page web d'afficher uniquement la diapositive en cours.
La fonction plusSlides ajoute/soustrait la valeur donnée de slideIndex pour déterminer quelle diapositive afficher.
Si l'utilisateur n'interagit pas avec les boutons, les diapositives défilent automatiquement toutes les 3000 millisecondes.
L'ajout des événements mouseenter et mouseleave sur le conteneur permet de mettre en pause le défilement automatique lorsque la souris survole le carrousel, et de le reprendre quand elle en sort.

Le carrousel avec boutons fonctionne comme suit :

Si l'utilisateur n'utilise pas les boutons de navigation, le carrousel défile automatiquement toutes les 3 secondes.

Test et débogage du carrousel d'images

Les erreurs sont fréquentes dans le développement web. Ne vous découragez pas si votre code ne fonctionne pas du premier coup. Les options de test et de débogage suivantes peuvent vous aider à identifier et corriger les problèmes :

Débogage de chaque fichier séparément : Vérifiez individuellement la validité de vos codes HTML, CSS et JavaScript. Utilisez des outils tels que le service de validation du W3C pour HTML, le validateur CSS pour votre CSS et les outils de développement de Chrome pour JavaScript.
Effectuez différents types de tests : Réalisez des tests visuels pour vérifier l'affichage correct des images, des tests de performance pour évaluer la réactivité et des tests fonctionnels pour vous assurer que la navigation est fluide.
Testez votre code avec différents formats et tailles d'images : Un carrousel de qualité doit être capable de gérer différents formats et tailles d'images.
Automatisez vos tests : Utilisez des outils tels que Selenium ou LoadRunner pour créer des scripts d'automatisation de tests. Ces outils permettent de réutiliser certains tests et de gagner en efficacité.
Documentez vos tests : Consignez les étapes de vos tests pour faciliter la révision et l'amélioration de votre code.

Bonnes pratiques pour les carrousels d'images

Restez simple : Privilégiez un nombre d'images réduit. Entre 4 et 7 images par carrousel est généralement idéal.
Testez vos carrousels : Vérifiez leur bon fonctionnement avant de les mettre en ligne.
Créez des carrousels réactifs : Assurez-vous que vos carrousels s'adaptent correctement aux différentes tailles d'écrans.
Utilisez des images de haute qualité : Préférez des images nettes et bien définies. Enregistrer vos images au format SVG est une approche géniale, car elles ne perdent pas leur qualité lorsque vous les redimensionnez.
Redimensionnez vos images : Assurez-vous que toutes les images d'un même carrousel ont la même taille. Utilisez le CSS pour uniformiser leur apparence.

Conclusion

Nous espérons que vous avez désormais les outils nécessaires pour créer un carrousel d'images entièrement fonctionnel. Cette approche peut également être utilisée pour créer des carrousels vidéo.

Comment créer un curseur d'image avec JavaScript pour améliorer votre site Web

Qu'est-ce qu'un carrousel d'images ?

Prérequis pour la création d'un carrousel d'images

Mise en place du dossier de projet

Types de carrousels d'images

#1. Carrousel d'images automatique

Code HTML

Mise en forme du carrousel automatique via CSS

Rendre le carrousel interactif avec JavaScript

#2. Carrousel automatique avec boutons de navigation

Code HTML

Code CSS

Code Javascript

Test et débogage du carrousel d'images

Bonnes pratiques pour les carrousels d'images

Conclusion