Glider.js un slider optimisé pour les mobiles

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 !).

exemple d'utilisation de glider.js

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.classListwindow.requestAnimationFrameObject.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/

mike

mike

Chef de projet web, Mike assure la réussite de projets digitaux depuis 2011. Son but est d'aider les webmasters et les freelances à tirer le meilleur des outils comme WordPress, WooCommerce et Elementor. Sur ce blog il partage son expérience, ses astuces et les pépites dénichées sur le web. Côté pro, Mike adore apprendre de nouveaux trucs et faire progresser les autres, et côté perso les afters, faire des shoots de baskets et les films d'horreur. La légende raconte qu'avec un mojito il vous accordera +4xp de confiance

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Thématiques

Vous recherchez des astuces dans un secteur donné ? Vous pouvez accéder directement à la catégorie qui vous intéresse !