Tutoriel : Créer un slider d’images en JavaScript pur

Le slider (carrousel) : composant incontournable

Un slider d’images est un diaporama interactif que l’on retrouve sur presque tous les sites. Voici comment en créer un en JavaScript pur, sans bibliothèque externe.

Structure HTML

<div class="slider">
    <div class="slides">
        <div class="slide activé">
            <img src="slide1.jpg" alt="Formation Développement Web">
            <div class="legende">
                <h3>Développement Web</h3>
                <p>Apprenez HTML, CSS et JavaScript</p>
            </div>
        </div>
        <div class="slide">
            <img src="slide2.jpg" alt="Marketing Digital">
            <div class="legende">
                <h3>Marketing Digital</h3>
                <p>Maîtrisez les réseaux sociaux</p>
            </div>
        </div>
        <div class="slide">
            <img src="slide3.jpg" alt="Cybersécurité">
            <div class="legende">
                <h3>Cybersécurité</h3>
                <p>Protégez vos systèmes</p>
            </div>
        </div>
    </div>
    
    <!-- Flèches de navigation -->
    <button class="nav-btn prev">❮</button>
    <button class="nav-btn next">❯</button>
    
    <!-- Points indicateurs -->
    <div class="dots">
        <span class="dot activé" data-index="0"></span>
        <span class="dot" data-index="1"></span>
        <span class="dot" data-index="2"></span>
    </div>
</div>

CSS du slider

.slider {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

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

.slide {
    min-width: 100%;
    position: relative;
}

.slide img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}

/* Légende sur l'image */
.legende {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
}

.legende h3 { font-size: 24px; margin-bottom: 5px; }
.legende p { opacity: 0.9; }

/* Flèches */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s;
    z-index: 10;
}

.nav-btn:hover { background: white; }
.prev { left: 15px; }
.next { right: 15px; }

/* Points indicateurs */
.dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.3s;
}

.dot.activé { background: white; }

/* Responsive */
@media (max-width: 768px) {
    .slide img { height: 250px; }
    .legende h3 { font-size: 18px; }
}

JavaScript du slider

class Slider {
    constructor(élément) {
        this.slider = élément;
        this.slides = élément.querySelector('.slides');
        this.totalSlides = élément.querySelectorAll('.slide').length;
        this.dots = élément.querySelectorAll('.dot');
        this.currentIndex = 0;
        this.autoPlayInterval = null;
        
        this.init();
    }
    
    init() {
        // Flèches
        this.slider.querySelector('.prev').addEventListener('click', () => this.precedent());
        this.slider.querySelector('.next').addEventListener('click', () => this.suivant());
        
        // Points
        this.dots.forEach(dot => {
            dot.addEventListener('click', () => {
                this.allerA(parseInt(dot.dataset.index));
            });
        });
        
        // Swipe tactile (mobile)
        let touchStartX = 0;
        this.slider.addEventListener('touchstart', (e) => {
            touchStartX = e.touches[0].clientX;
        });
        this.slider.addEventListener('touchend', (e) => {
            const diff = touchStartX - e.changedTouches[0].clientX;
            if (Math.abs(diff) > 50) {
                diff > 0 ? this.suivant() : this.precedent();
            }
        });
        
        // Clavier
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft') this.precedent();
            if (e.key === 'ArrowRight') this.suivant();
        });
        
        // Démarrer le défilement automatique
        this.demarrerAutoPlay();
        
        // Pause au survol
        this.slider.addEventListener('mouseenter', () => this.arreterAutoPlay());
        this.slider.addEventListener('mouseleave', () => this.demarrerAutoPlay());
    }
    
    allerA(index) {
        this.currentIndex = index;
        this.slides.style.transform = `translateX(-${index * 100}%)`;
        
        // Mettre à jour les points
        this.dots.forEach(d => d.classList.remove('activé'));
        this.dots[index].classList.add('activé');
    }
    
    suivant() {
        const next = (this.currentIndex + 1) % this.totalSlides;
        this.allerA(next);
    }
    
    precedent() {
        const prev = (this.currentIndex - 1 + this.totalSlides) % this.totalSlides;
        this.allerA(prev);
    }
    
    demarrerAutoPlay() {
        this.autoPlayInterval = setInterval(() => this.suivant(), 4000);
    }
    
    arreterAutoPlay() {
        clearInterval(this.autoPlayInterval);
    }
}

// Initialiser
document.addEventListener('DOMContentLoaded', () => {
    new Slider(document.querySelector('.slider'));
});

Exercice pratique