Les sliders sont couramment placés dans les sites web. Ils font gagner de la place et peuvent égayer votre page avec son style d’animation, surtout l’image que vous mettez en avant.
Aujourd’hui, la tendance des slides ne présente plus seulement des images qui défilent sans aucune autre information. Leur contenu peut être un testimonial, une présentation de l’équipe ou une création accompagnée d’un texte et d’un CTA (Call To Action), permettant une autre manière de naviguer à travers le site ou en mettant en évidence une annonce éphémère. Autrement dit, les slides ont toutes leurs places dans votre site-web même si, en abuser, peut fatiguer votre visiteur.
Mais comment cela fonctionne ?
Un texte suivi d’un bouton au-dessus d’une image n’est pas très difficile dans le web. En revanche, faire défiler le tout est plus complexe. De vrais développeurs se sont attardés sur le problème et certains se sont démarqués. C’est le cas selon moi d’un certain Ken Wheeler, l’inventeur de Slick. Slick est une bibliothèque Javascript qui vous permet de créer votre slider. Avec quelques options dans votre Javascript, vous pouvez animer le contenu HTML de votre choix, afin de le faire défiler. Slick n’est pas le seul. Je pourrais citer Swiper ou Flickity avec lesquels j’ai déjà travaillé. Le « Carousel de Bootstrap » est lui aussi très connu sur le web.
Pour la plupart, ils fonctionnent de la même manière : vous cibler le conteneur parent de l’entité html qui renfermera le contenu (les enfants) que vous souhaitez faire défiler. Javascript fait le reste. Vous pouvez ensuite choisir le type d’animation, sa vitesse, faire apparaître ou non un menu de navigation sous forme de bullets ou sous forme de pagination…
Pourquoi Slick ?
Cela fait maintenant plus de 2 ans que j’utilise Slick-slider et je n’en suis toujours pas déçu. C’est sans doute la première raison et le fait aussi que je suis maintenant habitué à l’outil. Mais ce ne sont pas les seules raisons. Slick a pensé au responsive ; en renseignant dans votre javascript vos « lignes de flottaison« , vous pouvez modifier votre slide en fonction de la taille de l’écran. (exemple : faire défiler une section sur un téléphone – en faire défiler 3 sur tablette ou dekstop) – de plus, et c’est vraiment très fort, Slick permet d’associer votre slide avec un autre élément de votre page web qui fera office de navigation. Attention toutefois d’avoir le même nombre d’éléments dans les deux entités (si vous voulez faire défiler 5 images, prévoyez 5 liens pour activer l’image de votre choix) – en fait, Slick possède toutes les caractéristiques d’une bibliothèque javascript comme on les aime : faciles à prendre en main, logiques et aux options bien pensées.
Exemple
Dans mon exemple, j’ai mis en place un slide avec une double navigation ; on peut faire défiler les images une à une en cliquant sur les flèches. Mais on peut également faire défiler les images en fonction de leurs catégories. La catégorie active se place dans tous les cas tout à gauche. (La catégorie 3 par exemple, restera active pour 4 chats qui y sont attachés) – voilà un exemple qui peut vous faire comprendre toute la puissance de Slick.
