Kortic, Anthony Ladeuil

Comment créer et gérer plusieurs carrousel 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…

    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,
        "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,
                "stagePadding": 50
            }
        }
    }''
    Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…
    Voir aussi…
    2019-12-16