Qu’est ce que Glider.js?
Glider.js a été créé suite à la frustration créés par les carousels, spécialement sur les mobiles. Puisant osn inspiration dans le célèbre slick.js, Glider.js est une alternative rapide, légere, responsive, sans dépendence (no jquery !).
Glider.js n’est pas à proprement parler un carousel car il lui manque certaines fonctionnalités, comme de pouvoir tourner indéfiniment. Néanmoins, il permet d’utiliser le scroll natif du navigateur, créant une expérience plus naturelle aux interactions mobile, tout en conservant l’esthétique et les fonctionnalités du carousel, donc oui ça rend tout aussi bien sur desktop.
- Super léger (< 2.8kb gzippé !)
- Hyper rapide (quasiment 25ms d’initialisation!)
- Vanilla JS – Pas de dépendance (R’Garde M’man, sans jQuery!)
- Scroll Natif navigateur
- Responsive (basé sur des réglages breakpoint)
- flèche et Dot personnalisables
- Accessibilité au clavier + Label ARIA
- Supporte le drag avec la souris
- Support Flexbox(activé par défaut)
- Facilement extensible
- Events personnalisés
- et plein d’autres choses
Ce que Glider.js n’est pas :
Glider.js n’est pas une solution permettant de remplacer au pied levé les sliders que vous utilisez déjà. En effet, il ya plein de choses qu’il ne gère pas comme l’autoplay, le défilement sans fin, la width variable, le scroll vertical, les transitions personnalisés, height adaptive, etc.
Par contre c’est une très bonne solution par exemple pour les listes avec beaucoup d’éléments de même taille, comme par exemple une liste de produits. La valeur ajoutée pour vos internautes mobiles est vraiment notable en terme d’expérience.
Le support navigateur ?
Glider.js fonctionne sans souci sur les navigateurs récents. Pour les plus anciens, il faut utiliser un polyfill pour document.classList, window.requestAnimationFrame, Object.assign and CustomEvent.
Vous pouvez également utiliser directement le fichier glider-compat.min.js. pour supporter les anciens navigateurs.
Démos & Code
Les démos proposées sont assez complètes, slite normale, affichage partiel, responsive, coverflow avec perspective (sympa celle là), la possibilité de rajouter/supprimer des éléments. Vous avez tout à dispo pour rapidement le mettre en place. La doc aussi est assez complète
Voir les démos : https://nickpiscitelli.github.io/Glider.js/
