Accueil Kortic

    Comment 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 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,
                "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,
        "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()
    $('.load-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…
    Droits Réservés. Information sur la propriété intellectuelle. L'intégralité des contenus, notamment les photographies, sont la propriété de Anthony Ladeuil en tant qu'auteur. Aucune photographie présente sur le site ne provient de quelque autre source.
    Toutes les photographies présentes sur www.kortic.com sont soumises au droit d'auteur conformément au Code de la propriété intellectuelle - Article L112-2
    2020-02-26