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,
        "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,
        "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…
    Soutenez Aquinum
    Voir aussi…
    • Vérifier un numéro de carte bancaire Vérification de carte bancaire, script de validation de carte bancaire. Contrôle de format de numéro de carte bancaire, algorithme de Luhn carte de crédit Visa, Mastercard, Maestro, CB, Carte Bancaire, Discover Card, American Express, JCB Cards
    • Owl Carousel multiple Gérer plusieurs carrousels/sliders sur une seule page avec Owl Carousel 2. Manage multiple carousels/sliders on one page with Owl Carousel 2
    • Conversion SVG/CSS Encodage SVG pour CSS compatible Sass et exemple d'intégration SVG via xlink compatible CSS. SVG encoder, base64 SVG pour CSS.
    • Optimisation SVG Intégration SVG via xlink/use/symbol, factorisation de symbol SVG
    • Responsive SVG Utilisation des media queries internes au SVG
    • LazyLoad Intersection Observer LazyLoad avec IntersectionObserver API pour images, picture, iframe, etc.
    • Design, flux et accessibilité jQuery Responsive layout logical DOM plugin
    • Lightbox Responsive et Accessible Lightbox images jQuery Responsive accessible a11y. Automatisation d'une Lightbox multipages. Lightbox image unique ou multiple. Lightbox responsive et accessible a11y wcag
    • Tooltip (infobulle) a11y Tooltip (infobulle) compatible a11y et SEO, naviguable au clavier, accessible par lecteur d'écran
    • Zipcode patterns Contrôle automatisé de codes postaux internationaux
    • Responsive background-image jQuery responsive background-image plugin
    • Drapeaux ISO 3366 SVG Drapeaux nationaux vectoriels normés ISO alpha 2, alpha 3 et numérotation Organisation des Nations Unies (ONU). SVG drapeaux pour internationalisation de sites multilingues.
    • Layout rigolo Une autre approche pour définir un layout de page responsive.
    • Serveur d'images placeholders Serveur d'images placeholder pour le développement front-end
    • Générateur de Lorem Outil de génération de Lorem Ipsum. Utilisable en ligne ou par url distante.
    • Générateur de noms API de génération de couples prénom/nom aléatoires.
    2020-06-03