Salut, je vais vous présenter le plug-in BxSlider. S’appuyant sur jQuery, il est un véritable couteau suisse que je sélectionne très fréquemment lorsque j’ai besoin de mettre en place une galerie photos ou d’actualité sur mes projets. On parlera bien ici de slide, elle contient ce que vous souhaitez : texte, image, vidéo, etc.. on ne se limite pas à une galerie photos avec BxSlider !

Vous pouvez l’apercevoir ici, par exemple, sur les grands visuels qui composent la page d’accueil du site de l’office de tourisme de Reims :

http://www.reims-tourisme.com/

Les points forts tout d’abord

  • Personnalisation à tous les niveaux : besoin d’un simple gauche droite pour naviguer ? ok ! ou plutôt une pagination ? pas de problème, ah et je le voudrais vertical plutôt qu’horizontal, vous le faîtes aussi ce modèle ? sans problème ! Finalement je veux un défilement automatique sans bouton ? bon d’accord… si vous insistez !
  • Prévu pour le responsive, que ce soit pour fonctionner différemment selon les tailles d’écran ou faire varier la taille du slider selon les images.
  • Très peu d’influence de la feuille de style CSS sur votre contenu, on enlève vite les petits points de déco qu’on ne veut plus. Et si on veut changer le style des flèches et des boutons ? Rien de plus simple !  La css est légère et pratique.
  • Cerise sur le slider, les périphériques mobiles peuvent pratiquer les galeries photos en faisant glisser leurs petits doigts sur l’écran, magique !

La doc de BxSlider fourmille d’exemples concrets que je ne saurais trop vous conseiller de parcourir : http://bxslider.com/options

Mais quelques pièges à éviter

Je vais m’attarder donc plutôt sur les petites finitions pour le plug-in après retour d’expérience.

Tout d’abord un premier paramètre que j’ai mis d’office sur tous mes appels au plugin :

$(‘#magalerie’).bxslider({ useCSS :false}) ;

Pourquoi me direz-vous ? J’ai remarqué des soucis de transition sur certains navigateurs lorsque j’utilise les transitions CSS pour passer d’une slide à une autre comme c’est le cas par défaut. Le paramètre useCSS permet d’utiliser jQuery animate en place des transitions CSS et là plus de problème ! et puis certains navigateurs ne couvrent pas nativement les transitions css tout simplement (oui Internet Explorer 9 & co c’est de vous dont on parle HEIN !), jQuery animate pourra remplacer tout cela.

L’autre point concerne la gestion du tactile

En effet Microsoft n’a pas fait les choses comme les autres, vous n’aurez pas sur votre Windows Phone  la gestion du tactile qui permet de déplacer de gauche à droite par exemple les slides. On va avoir des évènements de type MSPointerDown, MSPointerMove , MSPointerUp qui ne sont utilisés que par les produits Microsoft

Pour remédier à cela, une version modifiée du plug-in a été mise en place par un contributeur, je vous recommande de prendre cette dernière :

https://github.com/breams/bxslider-4

Le fichier JS est à utiliser tel quel, pour ce qui est de la CSS vous avez également ceci à rajouter :

.bx-wrapper{-ms-touch-actionnone;}

Cette optimisation est recommandée dans un billet de blog de Microsoft :

To improve the performance of touch interactions, it is now required that you add to the intended touch target a CSS property that disables the default touch actions. The CSS syntax is :

#touchTarget {-ms-touch-actionnone;}

Source : http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx

A bientôt pour de nouveaux articles sur nos outils JavaScript préférés.

Filtres

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec un *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>