Comment créer un slider simple et fonctionnel en JavaScript pur 🔥

Aujourd'hui, il est difficile d'imaginer un site moderne sans un slider pratique. 🔥 Les sliders rendent une page Web plus dynamique et attrayante, aident à afficher plus de contenu et économisent de l'espace à l'écran.

Dans cet article, vous apprendrez à créer plusieurs types de sliders populaires en utilisant uniquement du JavaScript pur et aucune bibliothèque supplémentaire. Cela aidera votre projet à rester léger, rapide et facile à entretenir. Allons-y !

📌 Pourquoi du JavaScript pur et non une bibliothèque ?

Bien sûr, les bibliothèques comme Swiper, OwlCarousel ou SlickJS sont très pratiques. Mais le JavaScript pur présente des avantages évidents :

• 🚀 Taille de page réduite et vitesse de chargement plus rapide ;

• 🎯 Contrôle total sur la fonctionnalité ;

• 🛠️ Possibilité de réglage flexible et ponctuel pour des tâches spécifiques.

🔖 Éléments d'un simple slider : à quoi sert chacun d'eux ?

Avant de commencer à écrire du code, voyons pourquoi nous avons besoin d'éléments dans la structure HTML et CSS pour notre slider.

• Conteneur du curseur (slider): bloc principal délimitant la zone visible des diapositives.

• Conteneur de diapositives (slides): bloc interne contenant les images (diapositives). Avec CSS, ce bloc se déplacera vers la gauche ou la droite, en faisant défiler les diapositives.

• Boutons de commande (prev et next): permet à l'utilisateur de basculer manuellement entre les diapositives.

🖥️ Exemple n°1 : Curseur horizontal de base avec boutons

Créons un cadre HTML :

<div class="slider">
  <div class="slides">
    <img src="slide1.jpg" alt="Slide 1">
    <img src="slide2.jpg" alt="Slide 2">
    <img src="slide3.jpg" alt="Slide 3">
  </div>

  <button class="prev">←</button>
  <button class="next">→</button>
</div>

CSS pour les styles :

.slider {
  width: 800px;
  overflow: hidden; /* Скрываем лишние слайды */
  position: relative;
  margin: auto;
}

.slides {
  display: flex; /* Располагаем изображения горизонтально */
  transition: transform 0.5s ease; /* Анимация перехода */
}

.slides img {
  width: 800px; /* Ширина каждого слайда равна ширине слайдера */
  flex-shrink: 0; /* Запрещаем сжатие изображений */
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

JavaScript, explication de la logique :

// Obtenir des éléments DOM
const slides = document.querySelector('.slides');
const images = document.querySelectorAll('.slides img');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

let currentSlide = 0; // Diapositive actuelle

// Fonction de commutation de diapositives
function showSlide(index) {
  if (index < 0) {
    currentSlide = images.length - 1; // Si moins que le premier, passez au dernier
  } else if (index >= images.length) {
    currentSlide = 0; // Si plus que le dernier, passez au premier
  } else {
    currentSlide = index;
  }

  // Déplacer le conteneur de diapositives à la position désirée
  slides.style.transform = `translateX(-${currentSlide * 800}px)`;
}

// Traitement des clics
prevBtn.addEventListener('click', () => showSlide(currentSlide - 1));
nextBtn.addEventListener('click', () => showSlide(currentSlide + 1));

🎨 Exemple n°2 : Diaporama automatique sans fin avec effet de fondu

Cette option est adaptée aux bannières ou aux galeries avec une transition en douceur.

Code HTML :

<div class="fade-slider">
  <img class="fade-slide active" src="slide1.jpg">
  <img class="fade-slide" src="slide2.jpg">
  <img class="fade-slide" src="slide3.jpg">
</div>

Styles CSS :

.fade-slider {
  position: relative;
  width: 800px;
  height: 500px;
  margin: auto;
}

.fade-slide {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
  width: 100%;
  height: 100%;
}

.fade-slide.active {
  opacity: 1;
}

JavaScript pour le fonctionnement du curseur :

const slidesFade = document.querySelectorAll('.fade-slide');
let currentFade = 0;

function fadeShowSlide() {
  slidesFade.forEach(slide => slide.classList.remove('active')); // Supprimer la classe active
  currentFade = (currentFade + 1) % slidesFade.length; // Passons à la diapositive suivante
  slidesFade[currentFade].classList.add('active'); // Afficher la diapositive actuelle
}

// Commutation automatique toutes les 4 secondes
setInterval(fadeShowSlide, 4000);

📱 Exemple n°3 : Curseur adaptatif avec prise en charge des balayages mobiles

Ce curseur peut être commuté par balayage sur les appareils mobiles.

Principe général de JS pour la mise en œuvre des swipes :

const slider = document.querySelector('.slides');
let startX = 0;
let endX = 0;

slider.addEventListener('touchstart', e => {
  startX = e.touches[0].clientX;
});

slider.addEventListener('touchmove', e => {
  endX = e.touches[0].clientX;
});

slider.addEventListener('touchend', () => {
  if (startX - endX > 50) {
    showSlide(currentSlide + 1); // glisser vers la gauche
  }
  if (endX - startX > 50) {
    showSlide(currentSlide - 1); // glisser vers la droite
  }
});

🎯 Vous voulez améliorer encore plus vos compétences en JavaScript ?

Commencez à apprendre la programmation avec l'application Code! 👨‍💻
Kodik est une application pratique qui vous aidera à apprendre facilement JavaScript et d'autres technologies grâce à des tutoriels interactifs et des tâches intéressantes.