Créer un carrousel d'images en JavaScript

Étape 1 : Créer la Structure HTML du Carrousel

Commençons par créer la structure HTML de base. Le carrousel comportera plusieurs images disposées côte à côte et un conteneur pour naviguer entre elles. Nous allons veiller à ce que notre carrousel soit accessible à tous les utilisateurs, y compris ceux utilisant des technologies d'assistance.

<section class="carousel" aria-labelledby="carouselheading">
    <h3 id="carouselheading" class="visuallyhidden">Carrousel d'images</h3>
    <button class="carousel-button prev">&#10094;</button>
    <div class="carousel-track-container">
        <ul class="carousel-track">
            <li class="carousel-slide current-slide"><img src="image1.jpg" alt="Image 1"></li>
            <li class="carousel-slide"><img src="image2.jpg" alt="Image 2"></li>
            <li class="carousel-slide"><img src="image3.jpg" alt="Image 3"></li>
        </ul>
    </div>
    <button class="carousel-button next">&#10095;</button>
</section>

Explication du Code HTML

• <section class="carousel"> : Le conteneur principal du carrousel, qui englobe tous les éléments interactifs. L'attribut aria-labelledby="carouselheading" associe le carrousel à son titre, permettant aux utilisateurs de technologies d'assistance de comprendre son contenu. Pour en savoir plus sur l'utilisation de aria-labelledby, consultez la section correspondante de l'article sur les attributs ARIA.
• <h3 id="carouselheading" class="visuallyhidden"> : Un titre de niveau 3 qui fournit un contexte pour le carrousel. Il est masqué visuellement, mais accessible aux lecteurs d'écran.
• <button class="carousel-button prev"> : Bouton pour naviguer vers l’image précédente. L'utilisation de boutons pour la navigation améliore l'accessibilité, car ils sont facilement identifiables par les utilisateurs.
• <div class="carousel-track-container"> : Conteneur de la piste du carrousel, qui permet de contrôler le défilement des diapositives.
• <ul class="carousel-track"> : La liste des images du carrousel. En utilisant une liste, nous structurons correctement les diapositives pour les technologies d'assistance, facilitant ainsi la navigation entre elles.
• current-slide : La classe qui indique l’image visible au chargement, ce qui aide à gérer la visibilité des diapositives et permet une expérience utilisateur cohérente.

Étape 2 : Ajouter du Style CSS

Utilisons quelques styles de base pour que le carrousel fonctionne correctement.

.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
}

.carousel-slide {
    min-width: 100%;
}

.carousel-button {
    position: absolute;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 1;
}

.carousel-button.prev { left: 10px; }
.carousel-button.next { right: 10px; }

.visuallyhidden {
    position: absolute; /* Positionne l'élément en dehors du flux normal */
    width: 1px;        /* Réduit la largeur à 1 pixel */
    height: 1px;       /* Réduit la hauteur à 1 pixel */
    margin: -1px;      /* Utilise une marge négative pour éviter l'espace supplémentaire */
    padding: 0;        /* Aucune marge intérieure */
    overflow: hidden;   /* Cache tout débordement */
    clip: rect(0, 0, 0, 0); /* Cache l'élément en le découpant */
    border: 0;         /* Enlève toute bordure */
}

Explication du Code CSS

• .carousel : Définit le conteneur principal du carrousel. position: relative; permet aux éléments enfants positionnés absolument de se référer à ce conteneur, et overflow: hidden; cache les éléments qui débordent du conteneur, garantissant que seules les diapositives visibles sont affichées.
• .carousel-track : Utilise display: flex; pour disposer les diapositives horizontalement. Cela permet de faire défiler les diapositives de manière fluide.
• .carousel-slide : Définit chaque diapositive avec min-width: 100%;, ce qui garantit que chaque diapositive occupe toute la largeur du carrousel, permettant ainsi un défilement fluide d'une diapositive à l'autre.
• .carousel-button : Styles appliqués aux boutons de navigation. position: absolute; les place au-dessus du carrousel, top: 50%; les centre verticalement, et transform: translateY(-50%); ajuste leur position pour un alignement parfait. La couleur de fond semi-transparente (rgba(0, 0, 0, 0.5)) améliore la visibilité des boutons sur les diapositives.
• .carousel-button.prev et .carousel-button.next : Ces classes positionnent respectivement les boutons de navigation à gauche et à droite du carrousel, offrant ainsi une interface utilisateur intuitive pour naviguer entre les diapositives.
• .visuallyhidden : Cette classe est utilisée pour cacher visuellement des éléments tout en les rendant accessibles aux technologies d'assistance comme les lecteurs d'écran. Elle utilise position: absolute; et d'autres propriétés pour réduire la taille de l'élément à 1 pixel et le découper, ce qui garantit qu'il n'occupe pas d'espace visuel sur la page.

Étape 3 : Ajouter la Logique JavaScript

Nous allons maintenant ajouter le code JavaScript pour gérer la navigation dans le carrousel.

const track = document.querySelector('.carousel-track');
const slides = Array.from(track.children);
const nextButton = document.querySelector('.carousel-button.next');
const prevButton = document.querySelector('.carousel-button.prev');

let currentIndex = 0;

function updateSlidePosition() {
    const slideWidth = slides[0].getBoundingClientRect().width;
    track.style.transform = 'translateX(-' + (slideWidth * currentIndex) + 'px)';
}

nextButton.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % slides.length;
    updateSlidePosition();
});

prevButton.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    updateSlidePosition();
});

Explication du Code JavaScript

• track : Sélectionne l'élément contenant toutes les diapositives. Cet élément agit comme une "piste" que le carrousel déplace horizontalement pour afficher la diapositive active.
• slides : Convertit les éléments enfants de track en tableau, chaque élément représentant une diapositive individuelle du carrousel.
• nextButton et prevButton : Sélectionnent les boutons pour avancer ou reculer dans les diapositives.
• currentIndex : Indice de la diapositive actuellement visible, initialisé à 0 pour pointer vers la première diapositive.
• updateSlidePosition() : Fonction qui met à jour la position de la piste d'images en fonction de currentIndex
• slideWidth : Récupère la largeur d'une diapositive. La largeur est utilisée pour calculer le déplacement nécessaire pour afficher la diapositive active.
• track.style.transform : Déplace la piste avec translateX, calculé en multipliant la largeur d'une diapositive par currentIndex.
• nextButton.addEventListener('click', ...) : Ajoute un écouteur d'événement qui incrémente currentIndex de 1, tout en revenant à la première diapositive lorsque la dernière est atteinte grâce à l'opérateur modulo.
• prevButton.addEventListener('click', ...) : Ajoute un écouteur d'événement qui décrémente currentIndex de 1, tout en revenant à la dernière diapositive si on est sur la première.

Exemple Pratique

Voici un exemple fonctionnel. Essayez de naviguer entre les images en utilisant les boutons "❮" et "❯".