Créer un Diaporama d’Images avec JavaScript et CSS

Introduction

Créer un diaporama d’images est une compétence essentielle pour tout développeur front-end. Non seulement cela améliore l’interface utilisateur (UI), mais cela rend également votre site plus interactif. Dans cet article, nous allons explorer comment réaliser un diaporama simple en utilisant JavaScript et CSS.

Étape 1 : Structure HTML de base

Pour commencer, nous avons besoin d’une structure HTML de base. Voici un exemple :

<div class="diaporama">
    <img src="image1.jpg" alt="Image 1" class="diaporama-image">
    <img src="image2.jpg" alt="Image 2" class="diaporama-image">
    <img src="image3.jpg" alt="Image 3" class="diaporama-image">
    <button class="prev">Précédent</button>
    <button class="next">Suivant</button>
</div>

Dans cet exemple, nous avons trois images et deux boutons pour naviguer entre elles.

Étape 2 : Styles CSS

Ensuite, nous allons ajouter des styles CSS pour rendre notre diaporama attrayant :

.diaporama {
    position: relative;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
}
.diaporama-image {
    display: none;
    width: 100%;
}
.diaporama-image.active {
    display: block;
}
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    cursor: pointer;
}

Nous masquons toutes les images par défaut et n’affichons que celle qui a la classe active.

Étape 3 : JavaScript pour la navigation

Enfin, ajoutons le JavaScript pour gérer la navigation entre les images :

const images = document.querySelectorAll('.diaporama-image');
let currentIndex = 0;

function showImage(index) {
    images.forEach((img, i) => {
        img.classList.toggle('active', i === index);
    });
}

document.querySelector('.next').addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
});

document.querySelector('.prev').addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    showImage(currentIndex);
});

showImage(currentIndex);

Ce code permet de naviguer entre les images en ajoutant ou en supprimant la classe active.

Conclusion

Créer un diaporama d’images avec JavaScript et CSS est un excellent moyen d’améliorer l’UI de votre site. En suivant ces étapes simples, vous pouvez facilement mettre en œuvre un diaporama fonctionnel et attrayant. N’hésitez pas à personnaliser le style et les fonctionnalités selon vos besoins !