le 6 Juillet 2018

Septième projet Van11y : un carrousel accessible

Ce projet a mis un certain temps à sortir car quelque peu complexe à coder, il est inspiré de son ancêtre, un plugin jQuery de carrousel.

Attention toutefois si vous étiez habitué à utiliser la version jQuery, car même si les fonctionnements sont assez semblables, il existe des différences notables côté utilisation et implémentation :

  • La version jQuery utilisait toute une artillerie lourde en JavaScript pour ajouter une classe visibility-off pour les contenus non affichés quand le carrousel utilisait des transitions… ce système a été abandonné, car il est mis en place au niveau des CSS (beaucoup plus élégamment et léger).
  • Les éléments sont devenus beaucoup plus simples à styler : finis les .carrouselslide-1-x.slide > div à répétition, bonjour les [data-carrousel-active-slide="1"].transition > .carrousel__content bien plus simples.
  • Certaines classes générées ont été abandonnées, et d’autres ajoutées, pour plus de consistance pour les personnes qui s’en serviront.

La compatibilité est aux standards habituels : IE9 et supérieurs une fois le script transpilé (fourni sur le dépôt Github dans le répertoire « dist »). Il faudra par contre vérifier que les transitions utilisées avec CSS collent avec vos besoins.

Côté poids, nous en sommes à 3ko minifié et gzippé pour ce script, ce qui reste très raisonnable.

Vous pourrez le trouver ici : carrousel accessible, avec des démos, des exemples et toute la documentation qui va bien.

Voila, c’est une version 1.0, jeune et imparfaite, je travaille déjà à l’améliorer, mais elle fonctionne, et j’espère qu’elle vous servira !