Gérer plusieurs carrousels sur une seule page avec Owl Carousel 2

Au lieu de gérer 'n' fonctions pour chacun des sliders, il est tout à fait possible de placer les propriétés inline sous forme de JSON. Un peu de code en back mais bien plus simple en maintenance côté front…

Placer un attribut data-properties sur les éléments .owl-carousel. Cet attribut va porter les paramètres utilisés par l'appel de la fonction générique.
L'appel de la fonction se fait sur un $(document).ready(). Si l'attribut data-properties n'est pas présent, les valeurs par défaut de owl.carousel sont appliquées.

Du coup, pour chaque caroussel présent sur le site et/ou dans une même page, chaque instance est gérée automatiquement et indépendamment des autres, sans avoir à créer une fonction spécifique par carousel.

https://owlcarousel2.github.io/OwlCarousel2/

La fonction Javascript (avec jQuery)

Mise en oeuvre

Côté développement back, il suffit de récupérer les données de configuration (définies en back office, par json, xml ou autre, sous forme d'un array.

Dans le template, l'élément porteur des propriétés :

Note : la valeur de l'attribut data-properties='' est passée entre simple quote pour respecter le format d'encodage à double quotes JSON (voir json.org ).

Exemples

Carousel sans data-properties

Carousel avec data-properties

Carousel avec data-properties

La version utilisée sur Kortic

L'option Lazy Load native de OwlCarousel est remplacée par l'API Intersection Observer globale au site.

Utilisation des sources
Les sources de « Gérer plusieurs carrousels sur une seule page avec Owl Carousel 2 » proposées par sont mises à disposition selon les termes de la licence Creative Commons CC BY-NC-SA 4.0 (licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions).
Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…
Un petit sou avec
2021-01-28