Mon nom est David “McTaylis” Dubois, artiste saint-quentinois de 29 ans, illustrateur de genre furry et de style cartoon, mais également web développeur frontend et WordPress.

Je suis aussi un passionné de musique et un fan des espèces reptiliennes.

Scripts PHP/JS

Ajouter une scrollbar à Owl Carousel

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.