Structure HTML

Le fichier index.html définit le conteneur prnicipal du carrousel :

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Diaporama JavaScript</title>
    <link rel="stylesheet" href="styles/carousel.css">
</head>
<body>
    <h1>Diaporama avec JavaScript</h1>
    
    <div class="carousel-wrapper">
        <div class="carousel-container">
            <img src="photos/slide1.jpg" id="slideImage" alt="Image du diaporama">
            
            <button class="nav-btn prev-btn" id="btnPrevious">
                <img src="icons/arrow-left.png" alt="Précédent">
            </button>
            
            <button class="nav-btn next-btn" id="btnNext">
                <img src="icons/arrow-right.png" alt="Suivant">
            </button>
            
            <div class="caption-box">
                <p id="imgCaption"></p>
            </div>
        </div>
    </div>
    
    <script src="scripts/carousel.js"></script>
</body>
</html>

Feuille de styles CSS

Le fichier styles/carousel.css gère l'apparence visuelle :

.carousel-wrapper {
    width: 500px;
    height: 350px;
    margin: 80px auto;
}

.carousel-container {
    position: relative;
}

#slideImage {
    width: 500px;
    height: 320px;
    display: block;
}

.nav-btn {
    width: 35px;
    height: 35px;
    border: none;
    cursor: pointer;
    background: transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-100%);
    border-radius: 50%;
    transition: background-color 0.3s;
}

.nav-btn:hover {
    background-color: rgba(180, 180, 180, 0.7);
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.nav-btn img {
    width: 20px;
    height: 20px;
}

.caption-box {
    background-color: rgba(30, 30, 30, 0.9);
    padding: 15px;
    margin-top: -55px;
    position: relative;
}

#imgCaption {
    color: #ffffff;
    text-align: center;
    margin: 0;
    font-size: 14px;
}

Script JavaScript

Le fichier scripts/carousel.js assure la logique de navigation :

// Configuration du carrousel
const CONFIG = {
    totalSlides: 3,
    intervalDelay: 5000,
    imageFolder: 'photos/',
    imagePrefix: 'slide',
    imageExtension: '.jpg'
};

// État courant du carrousel
let currentSlideIndex = 1;

// Références aux éléments du DOM
const slideElement = document.getElementById('slideImage');
const captionElement = document.getElementById('imgCaption');
const prevButton = document.getElementById('btnPrevious');
const nextButton = document.getElementById('btnNext');

// Descriptions associées aux images
const slideCaptions = {
    1: "<strong>Adieu ma concubine</strong><br>Une vie, c'est toute une vie. Pas une année de moins, pas un jour de moins !",
    2: "<strong>Happy Together</strong><br>Qui ne voudrait pas recommencer ? Mais combien d'amours peuvent vraiment renaître ?",
    3: "<strong>Les Cendres du temps</strong><br>Quand on ne peut plus posséder, tout ce qu'on peut faire, c'est ne pas oublier."
};

// Fonction pour générer le chemin de l'image
function buildImagePath(index) {
    return CONFIG.imageFolder + CONFIG.imagePrefix + index + CONFIG.imageExtension;
}

// Fonction pour mettre à jour l'affichage
function updateDisplay() {
    slideElement.src = buildImagePath(currentSlideIndex);
    captionElement.innerHTML = slideCaptions[currentSlideIndex];
}

// Navigation vers l'image précédente
function goToPrevious() {
    currentSlideIndex--;
    if (currentSlideIndex < 1) {
        currentSlideIndex = CONFIG.totalSlides;
    }
    updateDisplay();
}

// Navigation vers l'image suivante
function goToNext() {
    currentSlideIndex++;
    if (currentSlideIndex > CONFIG.totalSlides) {
        currentSlideIndex = 1;
    }
    updateDisplay();
}

// Écouteurs d'événements pour les boutons
prevButton.addEventListener('click', goToPrevious);
nextButton.addEventListener('click', goToNext);

// Initialisation de l'affichage
updateDisplay();

// Défilement automatique avec setInterval
setInterval(goToNext, CONFIG.intervalDelay);

Fonctionnalités implémentées

• Défilement automatique : Les images changent toutes les 5 secondes
• Navigation manuelle : Les boutons gauche et droit permettent de naviguer entre les images
• Légendes dynamiques : Chaque image possède une description qui s'affiche en bas du diaporama
• Boucle infinie : Le carrousel revient à la première image après la dernière

Points techniques notables

L'utilisation d'un objet CONFIG centralise les paramètres du carrousel, facilitant les modifications ultérieures. La séparation des fonctions de navigation (goToPrevious, goToNext) permet leur réutilisation tant pour les clics utilisateur que pour le défilemnet automatique.