Bonjour ! 👋 Aujourd'hui, nous allons voir comment créer un slider d'images simple mais fonctionnel en JavaScript pur. Nous n'utiliserons pas de bibliothèques tierces afin que vous puissiez mieux comprendre le fonctionnement de chaque élément du slider et comment il peut être amélioré.
Vous pouvez voir le slider fini ici : https://coursme.github.io/02-slider-js/
Étape 1. Préparation de la structure HTML
Tout d'abord, nous devons créer une structure HTML pour le slider. Nous utiliserons l'élément <div> pour envelopper les diapositives et plusieurs images qui basculeront.
Modèle HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Image Slider</title>
<style>
.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
box-sizing: border-box;
}
img {
width: 100%;
height: 100%;
}
.controls {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.control {
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
font-size: 18px;
cursor: pointer;
padding: 10px;
}
</style>
</head>
<body>
<h1>Слайдер изображений</h1>
<div class="slider">
<div class="slides">
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+1" alt="Slide 1"></div>
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+2" alt="Slide 2"></div>
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+3" alt="Slide 3"></div>
<div class="controls">
<button class="control" id="prevBtn"><</button>
<button class="control" id="nextBtn">></button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
📋 Explication:
.slider: un wrapper pour les diapositives qui définit des dimensions fixes et masque tout ce qui dépasse (overflow: hidden)..slides: Conteneur pour toutes les diapositives, qui se déplacera vers la gauche ou la droite pour changer les images..slide: Chaque diapositive individuelle. Nous lui donnons une largeur de 100 % pour qu'elle occupe toute la zone visible.Boutons de commande: Ce sont les boutons « avant » et « arrière » qui feront défiler les diapositives.
Étape 2. Ajout de la logique pour faire défiler les diapositives
Passons maintenant à la logique principale : changer de diapositives en cliquant sur les boutons. Nous devons suivre la diapositive actuelle et déplacer le conteneur .slides à l'aide de la propriété CSS transform.
Réalisation dans script.js :
const slides = document.querySelector('.slides');
const slide = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentIndex = 0;
const totalSlides = slide.length;
function updateSliderPosition() {
slides.style.transform = `translateX(-${currentIndex * 100}%)`;
}
nextBtn.addEventListener('click', () => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0; // Retour à la première diapositive
}
updateSliderPosition();
});
prevBtn.addEventListener('click', () => {
if (currentIndex > 0) {
currentIndex--;
} else {
currentIndex = totalSlides - 1; // Aller à la dernière diapositive
}
updateSliderPosition();
});
🔨 Comment ça marche:
translateX(): Nous utilisons cette propriété pour déplacer le conteneur de diapositives vers la gauche ou la droite en fonction de l'index de la diapositive actuelle.Logique des boutons: Chaque bouton augmente ou diminue l'index de la diapositive, puis la fonction
updateSliderPosition()est appelée, qui met à jour la position du conteneur.
Étape 3. Ajout du changement automatique de diapositives
Pour rendre notre slider plus pratique, nous allons ajouter une fonction de changement automatique des diapositives à intervalles réguliers. Cela créera un effet de galerie sans fin.
Ajoutons la commutation automatique :
let autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000); // Changement de diapositive toutes les 3 secondes
// Arrêt de la commutation automatique lors de l'interaction avec les boutons
nextBtn.addEventListener('click', () => {
clearInterval(autoSlideInterval);
autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000);
});
prevBtn.addEventListener('click', () => {
clearInterval(autoSlideInterval);
autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000);
});
🕒 Description:
Nous utilisons la fonction
setInterval()pour faire défiler automatiquement la diapositive toutes les 3 secondes.L'interaction avec les boutons (avant / arrière) suspend la commutation automatique, mais la relance ensuite pour que le curseur continue à fonctionner automatiquement.
Étape 4. Finalisation et test
Maintenant, votre slider est entièrement fonctionnel ! Vous pouvez faire défiler les diapositives manuellement à l'aide des boutons ou laisser le slider changer automatiquement les images toutes les quelques secondes.
Conclusion
Créer un slider en JavaScript pur est un excellent moyen de s'entraîner à manipuler le DOM et à travailler avec CSS. Un tel slider peut être facilement étendu en ajoutant, par exemple, des animations, des effets de fondu ou une navigation à l'aide de points indicateurs. 🚀
Si vous avez des questions ou si vous souhaitez ajouter de nouvelles fonctionnalités au slider, je suis toujours heureux de vous aider ! 😄
Référentiel avec le code final : https://github.com/Coursme/02-slider-js