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
Internet me connait sous le nom de McTaylis, artiste cartoon furry, passionné de programmation web frontend Wordpress et PHP.

Poster le commentaire

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

adipiscing risus. venenatis, massa Nullam fringilla leo felis et, diam dapibus vel,