Accueil Kortic

    Créer et 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)

    $('.owl-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,
                "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" 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,
        "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
            }
        }
    }''

    La version utilisée sur Kortic

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

    // utilise la fonction suivante
    $.fn.doOnce = function( func ) {
        this.length && func.apply( this );
        return this;

    };

    // l'appel sur $(document).ready()
    $('.owl-carousel').doOnce(function() {
        this.each(function () {

            let carousel = $(this),
                carousel_properties = carousel.data('properties') || null;

            carousel.on('initialized.owl.carousel changed.owl.carousel', () => {

                setTimeout(function () {

                    carousel.find('.owl-dot').each(function(index){
                        $(this).attr('data-dot', index+1).find('span').text(index+1);
                    });

                    // pose des class css supplémentaires pour détecter la présence des buttons de navigation et/ou les bullets
                    !carousel.find('.owl-nav').hasClass('disabled') ? carousel.addClass('has-nav') : carousel.removeClass('has-nav');
                    !carousel.find('.owl-dots').hasClass('disabled') ? carousel.addClass('has-dots') : carousel.removeClass('has-dots');

                    $.lazyIO(carousel);

                }, 50);

            }).owlCarousel(carousel_properties !== null ? carousel_properties : false).on('refreshed.owl.carousel', () => {
                !carousel.find('.owl-nav').hasClass('disabled') ? carousel.addClass('has-nav') : carousel.removeClass('has-nav');
                !carousel.find('.owl-dots').hasClass('disabled') ? carousel.addClass('has-dots') : carousel.removeClass('has-dots');
            })
        });

    });
    Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…
    Voir aussi…
    2020-03-28