Comment créer un slider d’images avec JavaScript ?

• Sommaire

  • Comment créer un slider d’images avec JavaScript ?
  • Étape 1 : Préparer le HTML
  • Étape 2 : Styliser avec CSS
  • Étape 3 : Ajouter la logique JavaScript
  • Conclusion

Comment créer un slider d’images avec JavaScript ?

Les sliders d’images sont des éléments visuels très prisés sur les sites web modernes. Ils permettent de présenter plusieurs images de manière dynamique et attrayante. Dans cet article, nous allons explorer les étapes nécessaires pour créer un slider d’images simple en utilisant JavaScript, HTML et CSS.

Étape 1 : Préparer le HTML

Pour commencer, nous devons créer la structure HTML de notre slider. Voici un exemple de code :

<div class="slider">
    <div class="slides">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <a class="prev" onclick="changeSlide(-1)"><</a>
    <a class="next" onclick="changeSlide(1)">>></a>
</div>

Dans cet exemple, nous avons un conteneur principal pour le slider, une div pour les images et deux liens pour naviguer entre les images.

Étape 2 : Styliser avec CSS

Pour que notre slider soit visuellement attrayant, nous devons ajouter un peu de CSS. Voici un exemple de style :

.slider {
    position: relative;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slides img {
    width: 100%;
    height: auto;
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 18px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    cursor: pointer;
}

Ce code CSS permet de centrer le slider et de faire défiler les images de manière fluide.

Étape 3 : Ajouter la logique JavaScript

Enfin, nous devons ajouter la logique JavaScript pour faire fonctionner notre slider.

. Voici un exemple de code :

let slideIndex = 0;
showSlides();

function showSlides() {
    let slides = document.querySelectorAll('.slides img');
    for (let i = 0; i  slides.length) {slideIndex = 1}    
    slides[slideIndex - 1].style.display = "block";  
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}

function changeSlide(n) {
    slideIndex += n;
    if (slideIndex > slides.length) {slideIndex = 1}
    if (slideIndex < 1) {slideIndex = slides.length}
    showSlides();
}

Ce code permet de faire défiler les images automatiquement toutes les deux secondes, tout en offrant la possibilité de naviguer manuellement grâce aux flèches.

Conclusion

Créer un slider d’images avec JavaScript est un excellent moyen d’améliorer l’interactivité de votre site web. En suivant ces étapes simples, vous pouvez facilement mettre en place un slider attrayant et fonctionnel. N’hésitez pas à personnaliser le style et la logique selon vos besoins pour créer une expérience utilisateur unique !