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

Comment créer un slider d'images avec JavaScript pour améliorer votre site Web

Vous êtes-vous déjà trouvé dans une situation où vous souhaitez afficher plusieurs images/vidéos sur une section d'une page web sans pour autant occuper beaucoup d'espace ? Vous souhaitez ajouter de l'interactivité à vos pages web ou les rendre plus attrayantes ?

Une barre de défilement d'images peut vous éviter bien des soucis. Dans cet article, nous définissons ce qu'est un curseur d'images, les conditions préalables à la création d'un curseur d'images et la manière d'en créer un à l'aide de HTML, JavaScript et CSS.

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

Les sliders sont des carrousels ou des diaporamas qui affichent des textes, des images ou des vidéos. Cet article se concentre sur les sliders d'images. La plupart des développeurs web utilisent des sliders sur la page d'accueil pour présenter des offres promotionnelles ou les informations les plus importantes.

Voici quelques raisons pour lesquelles vous devriez utiliser des sliders sur vos pages web.

Améliorer l'expérience de l'utilisateur : Une page web idéale doit être compacte afin que les utilisateurs finaux n'aient pas à faire défiler les pages pour obtenir des informations importantes. Si vous avez plusieurs images, vous pouvez éviter aux utilisateurs de les faire défiler en les affichant dans une barre de défilement.
L'attrait visuel : La plupart des utilisateurs de sites web ne passent pas beaucoup de temps sur une page web ordinaire. Vous pouvez améliorer l'attrait visuel avec des curseurs et des animations.
Gagner de l'espace : Si vous souhaitez afficher une vingtaine d'images sur votre page web, elles risquent de prendre beaucoup de place. La création d'un curseur vous permettra d'économiser de l'espace tout en permettant aux utilisateurs d'accéder à toutes les images.
Afficher un contenu dynamique : Vous pouvez utiliser les curseurs pour afficher du contenu dynamique tel que des liens vers des médias sociaux, des blogs et des actualités.

Conditions préalables à la création d'un curseur d'images

Des connaissances de base en HTML : Nous décrirons ici la structure du curseur. Vous devez être à l'aise avec les différentes balises HTML, les classes et les divs.
Des connaissances de base en CSS : Nous utilisons les CSS pour styliser nos curseurs d'images et nos boutons.
Des connaissances de base en JavaScript : Nous utiliserons JavaScript pour rendre les curseurs d'image réactifs.
Un éditeur de code : vous pouvez utiliser l'éditeur de code de votre choix. J'utiliserai Code Visual Studio.
Une collection d'images.

Créez le dossier du projet

Nous avons besoin d'un dossier de projet, d'un dossier d'images à l'intérieur de celui-ci et de fichiers HTML, CSS et JavaScript. Je nommerai mon projet "Image-Slider". Vous pouvez créer votre projet manuellement ou utiliser ces commandes pour commencer ;

mkdir Image-Slider

cd Image-Slider

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

Ajoutez toutes vos images au dossier "Images" que nous avons créé dans le dossier du projet et passez à l'étape suivante.

Voici mon dossier projet, dans lequel j'ai ajouté six images que j'utiliserai pour créer un slider. Tout notre code HTML se trouve dans le fichier index.html.

Types de curseurs d'images

Nous pouvons avoir deux types de curseurs d'images : un curseur automatique et un curseur d'images automatique avec des boutons.

#1. Curseur d'image automatique

Un curseur automatique fait défiler l'image suivante automatiquement après un certain temps, disons, par exemple, 3 secondes.

Code HTML

Voici mon code HTML ;

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="styles.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />


</head>

<body>
 <div id="slider">
 <div class="slide">
 <h1>Africain</h1>
 <img src="Images/img1.jpg" alt="Image 1">
 </div>
 <div class="slide">
 <h1>Américain</h1>
 <img src="Images/img2.jpg" alt="Image 2">
 </div>
 <div class="slide">
 <h1>Asiatique</h1>
 <img src="Images/img3.jpg" alt="Image 3">
 </div>
 <div class="slide">
 <h1>Arabe</h1>
 <img src="Images/img4.jpg" alt="Image 4">
 </div>
 <div class="slide">
 <h1>Moderne </h1>
 <img src="Images/img5.jpg" alt="Image 5">
 </div>
 <div class="slide">
 <h1>Européen </h1>
 <img src="Images/img6.jpg" alt="Image 6">
 </div>
 </div>

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


</body>
</html&gt>

A partir de ce code, nous pouvons noter ce qui suit ;

J'ai importé mon fichier CSS dans index.html dans la section <head>. Il sera utilisé dans les étapes suivantes.

<link rel="stylesheet" href="styles.css">

J'ai ajouté JavaScript à mon code HTML juste avant la balise de fermeture <body>. Je vais utiliser JavaScript pour ajouter des fonctionnalités aux curseurs.
Chaque diapositive a une classe de diapositive.
J'ai utilisé la balise <img> pour importer des images du dossier Images.

Stylez le curseur d'image automatique à l'aide de CSS

Nous pouvons maintenant styliser nos images puisque nous avons déjà lié les fichiers CSS et HTML.

Ajoutez ce code à votre fichier CSS ;

#slider {
 width : 80% ;
 }
  
 .slide {
 width : 80% ;
 display : none ;
 position : relative ;
 }
  
 .slide img {
 width : 80% ;
 height : 80% ;
 }
  
 .slide.active {
 display : block ;
 }

Ce code nous permet de constater ce qui suit ;

Nous avons fixé la largeur et la hauteur de notre diapositive à 80 %
Nous avons réglé la diapositive active sur block, ce qui signifie que seule la diapositive active sera affichée et que les autres seront masquées.

Comment ajouter du JavaScript pour rendre le curseur d'image réactif ?

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 JavaScript effectue les opérations suivantes ;

Nous utilisons le sélecteur document.querySelectorAll pour cibler tous les éléments dont la classe est slide.
Nous donnons à currentSlide une valeur initiale de 0.
Nous fixons la valeur de slideInterval à 2000 (2 secondes), ce qui signifie que les images du curseur changent toutes les 2 secondes.
Code Ce slides[currentSlide].className = 'slide' ; supprime la classe active de la diapositive actuelle
Code Ce currentSlide = (currentSlide 1 ) % slides.length ; incrémente l'index de la diapositive courante.
Code Ce slides[currentSlide].className = 'slide active' ; ajoute la classe active à la diapositive courante.

Le curseur automatique fonctionne comme suit ;

#2. Diapositive automatique avec boutons

Le curseur d'image que nous avons créé défile automatiquement toutes les 2 secondes. Nous pouvons maintenant créer une image où les utilisateurs peuvent passer à la diapositive suivante en cliquant sur un bouton ou qui défile automatiquement toutes les 3 secondes si l'utilisateur ne clique pas sur les boutons.

Code HTML

Vous pouvez modifier le contenu de votre fichier index.html comme suit ;

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Slider d'image</title>
 <link
 rel="stylesheet"
 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
 />
 <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
 <div class="container">

 <div class="mySlides">
 <img src="Images/img1.jpg" style="width:100% ; height:50vh" >
 </div>
      
 <div class="mySlides">
 <img src="Images/img2.jpg" style="width:100% ; height:50vh">
 </div>
      
 <div class="mySlides">
 <img src="Images/img3.jpg" style="width:100% ; height:50vh">
 </div>
      
 <div class="mySlides">
 <img src="Images/img4.jpg" style="width:100% ; height:50vh">
 </div>
      
 <div class="mySlides">
 <img src="Images/img5.jpg" style="width:100% ; height :50vh">
 </div>
      
      
 <a class="prev" onclick="plusSlides(-1)">❮</a>
 <a class="next" onclick="plusSlides(1)">❯</a>
      
 <div class="caption-container" > <div class="caption-container" > <div class="caption-container" > <div class="caption-container" > div class="caption-container"&gt;
 <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="Européen">
 </div>
 <div class="column">
 <img class="demo cursor" src="Images/img2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Africains">
 </div>
 <div class="column">
 <img class="demo cursor" src="Images/img3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Américain">
 </div>
 <div class="column">
 <img class="demo cursor" src="Images/img4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Asiatique">
 </div>
 <div class="column">
 <img class="demo cursor" src="Images/img5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Moderne">
 </div>
          
 </div>
 </div>

 <script src="script.js"></script>
 </body>
</html&gt>

Ce code HTML fonctionne comme suit ;

Nous avons une classe nommée mySlides qui contient nos cinq images.
Nous avons deux boutons, "prev" et "next" avec un onClick, permettant aux utilisateurs de faire défiler les diapositives.
Nous avons une vignette qui affiche les images dans la partie inférieure de la page web.

Code CSS

Ajoutez ceci à votre code ;

* {
 box-sizing : border-box ;
}

.container {
 position : relative ;
}

.mySlides {
 justify-content : center ;
}

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

Nous avons défini la propriété d'affichage de la classe .mySlides comme none, ce qui signifie que toutes les diapositives sont cachées par défaut.
Nous avons fixé l'opacité des vignettes survolées à 1 grâce à la règle active, .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('slideshow-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<x><x>[i]</x></x>.style.display = "none" ;
 }
 for (i = 0 ; i < dots.length ; i ) {
 dots<x><x>[i]</x></x>.className = dots<x><x>[i]</x></x>.className.replace(" active", "") ;
 }
 slides[slideIndex-1].style.display = "block" ;
 dots[slideIndex-1].className = "active" ;
 captionText.innerHTML = dots[slideIndex-1].alt ;
}

Vous pouvez obtenir le code source final ici.

Notre code JavaScript effectue les opérations suivantes ;

Nous disposons d'une fonction currentSlide dont la valeur d'affichage est définie comme none. Cette règle permet à notre page web de n'afficher que la diapositive en cours.
Nous avons une fonction plusSlides qui ajoute/soustrait la valeur donnée de slideIndex pour déterminer quelle diapositive afficher.
Si l'utilisateur ne clique pas sur les boutons, les diapositives se défileront automatiquement toutes les 3000 millisecondes.

Si l'utilisateur utilise l'onglet de navigation, notre curseur d'image fonctionnera comme suit ;

Si l'utilisateur n'utilise pas les boutons de navigation, le curseur d'image défilera automatiquement toutes les 3 secondes comme suit ;

Testez et déboguez le curseur d'image

Les erreurs font partie du parcours d'un développeur, et leur présence dans votre code ne signifie pas que vous êtes un mauvais développeur. Si votre code ne fonctionne pas même après avoir suivi les étapes mentionnées ci-dessus, vous pouvez essayer ces options de test et de débogage pour corriger les erreurs :

Déboguez chaque fichier séparément : Notre code comporte trois fichiers : HTML, CSS et JavaScript. Les trois langages ont des règles différentes. Vous pouvez vérifier si vos codes HTML, CSS et JavaScript sont valides à l'aide d'outils tels que Service de validation des balises du W3C pour le HTML, Validateur CSS pour votre code CSS et Chrome DevTools pour tester votre code JavaScript.
Effectuez différents types de tests : Vous pouvez effectuer des tests visuels pour vous assurer que les images sont affichées correctement, des tests de performance pour vérifier si les images sont réactives et des tests fonctionnels pour vous assurer que les images sont navigables.
Testez votre code avec différents formats et tailles d'images : Un bon slider d'images doit fonctionner avec différents formats et tailles d'images.
Automatisez vos tests : L'automatisation est omniprésente, et vous pouvez vous aussi en bénéficier dans vos tests. Vous pouvez utiliser des outils comme Sélénium ou LoadRunner pour écrire et exécuter des scripts d'automatisation des tests. Ces outils vous permettent également de réutiliser certains de vos tests.
Documentez vos tests : Les tests sont un processus continu. Vous devrez peut-être continuer à améliorer vos tests jusqu'à ce que votre code fonctionne comme prévu. Documentez ce processus pour rendre votre code lisible et facile à référencer.

Sliders d'images : Meilleures pratiques

Restez simple : Les sliders sont attrayants. Cependant, limitez le nombre d'images dans un curseur. L'idéal est d'avoir entre 4 et 7 images par diapositive.
Testez vos diapositives : Testez leur fonctionnalité avant de les publier en ligne.
Créez des sliders réactifs : Veillez à ce que les diapositives que vous créez s'adaptent aux différentes tailles d'écran.
Utilisez des images de haute qualité : Prenez/téléchargez des images de haute qualité pour vos sliders. Enregistrer vos images au format SVG est une excellente approche, car elles ne perdent pas leur qualité lorsque vous les redimensionnez.
Redimensionnez vos images : Vous pouvez avoir des images de tailles et de formats différents. Veillez toujours à ce que les images d'un curseur soient de la même taille. Vous pouvez y parvenir à l'aide de CSS.

Conclusion

Nous espérons que vous êtes maintenant en mesure de créer un curseur d'image entièrement fonctionnel pour afficher des données importantes sur votre site web sans utiliser de frameworks d'interface utilisateur. Vous pouvez utiliser la même approche pour créer des sliders vidéo sur les pages web.

Titus Kamunya

Auteur