Le blog du Frenshi

Ajouter une scrollbar à Owl Carousel

25 Août 2017 / jQuery, Programmation Web

Dans le cadre d’un projet de refonte complète du site d’une école d’ingénieurs, j’ai été amené à mettre en place un système d’affichage de flux de données en carrousels, à l’aide du plugin jQuery : Owl Carousel.

Cependant, lorsque l’on m’a demandé d’y ajouter une scrollbar horizontale pour faciliter la navigation, un problème s’est vite posé : aucune option ni aucun plugin ne permet d’ajouter cette fonctionnalité (du moins, par encore). Je me suis donc attelé à sa réalisation, que j’ai décidé de partager avec vous, qui est loin d’être parfaite mais reste tout de même fonctionnelle.

•••

Voici le résultat que vous obtiendrez avec le code proposé ci-dessous : http://demo.mctaylis.fr/owl-carousel-scrollbar/
Maintenant, passons au code !

La structure HTML

Quelques règles CSS pour styliser la scrollbar et le carrousel

Et toute la gestion de l’animation en jQuery

•••

La partie jQuery est bien entendue perfectible : une amélioration du code permettrait d’utiliser la scrollbar avec les boutons de navigation du plugin, ou encore déplacer automatiquement la barre aux limites quand le premier ou dernier élément du carrousel est atteint.

À propos de l'auteur

David "McTaylis" Dubois
Infographiste et web développeur Wordpress chez SMARTSON COMMUNICATION.
Durant mon temps libre, je suis également dessinateur furry, spécialisé dans le style cartoon.

Poster le commentaire

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

13641b676db5ff1872deb8ac26a39fc9XX