Kortic, Antony Ladeuil

Comment créer et gérer plusieurs carrousel / sliders 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 et une classe load-carousel utilisée par l'appel de la fonction générique.
L'appel de la fonction se fait sur un $(document).ready(). Si le data-properties n'est pas présent, les valeurs par défaut de owl.carousel sont appliquées.

Du coup, pour chaque slider présent sur le site et/ou dans une même page, chaque instance est gérée indépendamment des autres.

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

La fonction Javascript (avec jQuery)

$('.load-carousel').each(function(){
    var carousel = $(this),
        carousel_properties = carousel.data('properties') || null;

    carousel.owlCarousel(carousel_properties != null ? carousel_properties : false);
});

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.

$carousel_properties = [
    "loop"        => true,
    "nav"         => false,
    "dots"        => false,
    "margin"    => 30,
    "lazyLoad"    => true,
    "autoplay"    => true,
    "autoplayHoverPause" => true,
    "animateOut" => "fadeOut",
    "animateIn" => "fadeIn",
    "navSpeed" => 200,
    "dotsSpeed" => 200,
    "responsive" => [
        320     => [
            "items" => 1,
            "slideBy" => 1,
            "dots" => false,
            "nav" => true
        ],
        480        => [
            "items" => 2,
            "slideBy" => 2,
            "dots" => false,
            "nav" => true
        ],
        768     => [
            "items" => 4,
            "slideBy" => 4,
            "dots" => true,
            "nav" => false
        ]
    ]
];

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

<div class="owl-carousel owl-theme load-carousel" data-properties='<?php echo json_encode()?>'>

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

data-properties='{ "loop": false, "nav": true, "dots": true, "margin": 20, "lazyLoad": true, "responsive": { "320": { "items": 1, "slideBy": 1, "loop": true, "dots": false, "nav": true }, "480": { "items": 2, "slideBy": 2, "loop": true, "dots": false, "nav": true }, "768": { "items": 4, "slideBy": 4, "loop": true, "dots": true, "nav": false }, "1000": { "items": 5, "slideBy": 5, "margin": 10 } } }'

Carousel avec data-properties

data-properties='{ "loop": true, "nav": false, "dots": false, "margin": 15, "autoplay": true, "autoplayHoverPause": true, "animateOut": "fadeOut", "animateIn": "fadeIn", "navSpeed": 200, "dotsSpeed": 200, "stagePadding": 50, "responsive": { "320": { "items": 1, "slideBy": 1, "dots": false, "nav": true }, "480": { "items": 2, "slideBy": 2, "dots": false, "nav": true }, "768": { "items": 4, "slideBy": 4, "dots": true, "nav": false } } }'