Kortic, Anthony 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($carousel_properties)?>'>

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 ).

Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton… ou scanner le QR code.
QR CODE Paypal

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 } } }'
Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton… ou scanner le QR code.
QR CODE Paypal

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 } } }'
Voir aussi…
2019-08-17