Discutez avec nous 😊
Logo WhatsApp

Un slider en vanilla JS ultralight

Vous êtes dans l’écoconception de sites web (ou pas) et vous cherchez un slider en vanilla JS, ultralight (6 ko), adaptable et couvrant vos besoins les plus courants ? Essayez Elegant Slider, un slider que j’ai développé moi-même dans l’esprit éco-conception. Je l’utilise en production depuis plus d’un an.

Elegant Slider est un slider que j’ai développé pour mon usage pro et que j’utilise en production depuis plus d’un an maintenant.

Il est ultra-léger (5.5 ko de JS et 1.2 ko de CSS une fois mignifié), compatible tous navigateurs, responsive.

J’ai également porté attention son accessibilité, avec tous les aria-* qui vont bien.

Son intégration dans votre code est pensée pour être la plus souple et la plus simple possible.

Aperçu rapide

Ce que fait Elegant Slider

Il est pensé pour couvrir les besoins classiques.

Il dispose d’une API simple, déclenche un custom event lors du changement de slide et peut être contrôler de l’extérieur.

Ce que ne fait pas Elegant Slider

Par rapport aux alternatives

  • Swiffy Slider : un peu plus léger (4,2 ko), mais ne gère par le slide infini, et nécessite un script complémentaire (de 4 ko) pour pouvoir fonctionner correctement sur Safari. De plus, l’animation est forcément de type translate.
  • Glide : plus de fonctionnalités et d’animations « fancy », mais tout de même 28 ko.
  • Swiper : là encore, beaucoup plus riche dans les animations proposées, mais fait 100 ko mignifié !
  • Sliders liés à un framewok ou une bibliothèque (Tailwind, Bootstrap…) : non seulement ils ne sont pas aussi légers, mais c’est souvent un peu la prise de tête pour isoler le code strictement nécessaire de la bibliothèque.

Tutoriel

Pour utiliser Elegant Slider, vous allez avoir besoin de deux fichiers : slider.js et slider.css. Vous trouverez ces deux fichiers sur mon repo Github.

HTML

Dans votre page web, collez le code HTML suivant :

<div class="slider-wrapper">
	<div class="slides-tape"> <!-- add fade-transition class if needed -->
		<div class="slide"></div>
		<div class="slide"></div>
		<div class="slide"></div>
	</div>
</div>

CSS

Rendez le CSS contenu dans le fichier slider.css accessible à votre page web, de la manière que vous préférez. Pour des questions d’efficacité, vous pouvez ou bien l’intégrer à votre fichier CSS principal, ou bien le mettre dans une balise <style> dans le <head>.

J’ai mis quelques commentaires dans ce fichier, mais vous ne devriez pas avoir besoin d’y toucher.

JavaScript

Création du slider

Le fichier slider.js exporte la fonction createSlider, qui prend en argument le HTMLElement qui contient le slider, ainsi qu’un objet avec des paramètres optionnels.
Pour créer un slider, il suffit de trois lignes. 


import createSlider from "./path/to/slider.js";
// selection du nœud
const sliderWrapper = document.querySelector(".slider-wrapper");
// creation du slider avec les options par défaut.
const mySlider = createSlider(sliderWrapper);

Paramètres

La fonction createSlider accepte un objet comme second argument optionnel.

Voici la structure de cet objet, avec les valeurs par défaut.


const mySlider = createSlider(sliderWrapper, {

	// animation duration in ms (int)
	animationTiming: 200,

	// slide display duration in ms
	// (int. 0 → manual switch between slides)
	pauseTiming: 0,

	// infinite loop between slides (bool)
	infiniteCycle: false,

	// show previous / next buttons (bool)
	showArrows: true,

	// show navgation dots (boolean),
	showDots: true,

	// show slide number, eg. 2/15 instead of dots
	// (boolean, prevails on showDots option)
	showSlideNumber: false,

	// prevent touch events, for 100% automatic slider
	preventTouchEvents: false
});

Le choix du type de transition (translate ou fade) se fait via la classe fade-transition appliquée – ou pas – sur le wrapper du slider.

Attention : à cause du positionnement absolu des slides dans le cas d’une animation de type fade, il vous faudra préciser la hauteur du slider (via les propriétés CSS height, min-height ou aspect-ratio)

API

Le changement de slide déclenche un événement slideChange sur le HTMLElement du slider.


import createSlider from "./path/to/slider.js";
const sliderWrapper = document.querySelector(".slider-wrapper");
const mySlider = createSlider(sliderWrapper);

sliderWrapper.addEventListener("slideChange", (e) => {
	console.log(e.detail) // affiche le numéro du slide actif
	console.log(mySlider.position) // idem
})

L’objet Slider est manipulable de l’extérieur via la méthode showSlide(int slideNumber, bool isAnimated = false) et la propriété position qui correspond au numéro du slide affiché (compté à partir de 1).


import createSlider from "./path/to/slider.js";
const sliderWrapper = document.querySelector(".slider-wrapper");
const mySlider = createSlider(sliderWrapper);
mySlider.showSlide(2); // affiche le deuxième slide avec animation
mySlider.showSlide(3, false); // affiche le 3e slide sans animation de transition
let activeSlide = mySlider.position; // numéro du slide actif

Ceci vous permet, par exemple, de créer des vignettes qui, lorsqu’on clique dessus, affiche le slide correspondant.

Démos

Démo n° 1, avec les options suivantes :


{infiniteCycle: true}
demo image 1
demo image 2
demo image 3
demo image 4
demo image 5

Démo n° 2, avec les options suivantes :


{
	infiniteCycle: true,
	showSlideNumber: true,
	showArrows: false,
	pauseTiming: 2500,
	animationTiming: 1000
}
demo image 1
demo image 2
demo image 3
demo image 4
demo image 5

Démo n° 3, avec les options suivantes :


{
	showArrows: false,
	pauseTiming: 2500,
	animationTiming: 1000,
	preventTouchEvents: true
}
demo image 1
demo image 2
demo image 3
demo image 4
demo image 5

Conclusion

Si vous avez besoin d’un slider simple et efficace, n’hésitez pas à tester Elegant Slider. Faites-moi part de vos remarques. Et n’oubliez pas le lazy loading sur vos images ! 😊