Ajouter une scrollbar à Owl Carouselpar McTaylis, le 02 août 2017

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.

Commentaires (1)


Arsenii 14 mai 2020, 12h45

Salut! Code utile – merci.
Mais ne me dites pas comment l’utiliser, si à la page 2 ou plusieurs carrousels avec cette fonctionnalité?

Laisser un commentaire




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