Centre OwlCarousel lorsque moins de X articles

Nous utilisons OwlCarousel 1.3.3 sur notre site responsive. Nous avons fixé le nombre maximum de points à 4.

$container.owlCarousel({
    items: 4,
    itemsDesktop: [1000, 4], 
    itemsDesktopSmall: [900, 3], 
    itemsTablet: [600, 2], 
    itemsMobile: [480, 1]
});

Tant que le carrousel contient 4 ou plus d'images tout fonctionne bien. Mais quand un éditeur ajoute seulement 3 ou moins de points que nous voulons ces éléments de façon à être centré sur la page. Juste maintenant, ils sont "aligné à gauche" et il n'a pas l'air très bon.

L'option itemsScaleUp n'est pas ce que je cherche. Si des articles est fixé à 4, mais le carrousel contient seulement 1 point cet élément serait un trop gros.

J'ai trouvé ces problèmes sur github:
https://github.com/smashingboxes/OwlCarousel2/issues/35
https://github.com/OwlFonk/OwlCarousel/issues/417
Mais de rien je trouve utile.

Vous pouvez voir le problème dans ce codepen.

Mise à jour:
À la recherche par le biais de la source de OwlCarousel vous verrez que le .owl-wrapper éléments de largeur obtient multipliée par 2. Mais je ne peux pas comprendre pourquoi, et si il est sûr de supprimer le multiplicateur.

J'ai ouvert ce github problème pour essayer d'obtenir quelques éclaircissements.

Pourriez-vous fournir une quantité minimale en ligne exemple, afin que nous puissions voir le problème à l'action?
J'ai ajouté un codepen

OriginalL'auteur pstenstrm | 2015-06-23

  1. 12

    Dans la nouvelle version de Owl Carousel 2, vous devez ajouter ce css:

    .owl-stage{
    margin: 0 auto;
}

    ce travail est pour moi la version 2.

    Ce qui concerne les!

    Pour que cela fonctionne avec OwlCarousel 2, l'option "centre" doit être réglé sur "false".
    a travaillé pour moi. merci

    OriginalL'auteur Radames E. Hernandez

  2. 9

    OwlCarousel a un multiplicateur de x2 sur le .owl-wrapper éléments de largeur. Ce multiplicateur rend incroyablement dur au centre du carrousel quand il est moins complet.

    Cependant, ce multiplicateur ne semble pas avoir de raison d'être là. Rien ne semble pouvoir briser lorsque je le supprime. Donc, c'est ce que j'ai fait la mise à jour owl.carousel.js peut être trouvé ici: https://github.com/Vinnovera/OwlCarousel/tree/remove-width-multiplier

    Et j'ai ajouté ce CSS (ce qui n'est pas inclus dans le repo):

    .owl-wrapper {
    margin: 0 auto;
}

    OriginalL'auteur pstenstrm

  3. 4

    Au lieu de changer de source, vous pouvez utiliser afterInit et ufterUpdate méthodes. Quelque chose comme ceci:

            var owl = $('#carousel');
         owl.owlCarousel({
                        items 6,
                        afterInit: function () {
                            owl.find('.owl-wrapper').each(function () {
                                var w = $(this).width() / 2;
                                $(this).width(w);
                                $(this).css('margin', '0 auto');
                            });
                        },
                        afterUpdate: function () {
                            owl.find('.owl-wrapper').each(function () {
                                var w = $(this).width() / 2;
                                $(this).width(w);
                                $(this).css('margin', '0 auto');
                            });
                        }
                    });
    Sauveur 🙂 ... c'est génial
    Fonctionne avec la version 1.3.3

    OriginalL'auteur Vlad Los

  4. 1

    Changer cela:

    .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    display:inline-block;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }

    Et ce

    .owl-carousel {
    display: none;
    width: 100%;
    text-align:center;
}

    OriginalL'auteur Tóth Balázs

  5. 1

    Solution pour Owlcarousel2

    var owl = $('.owl-carousel');
owl.owlCarousel();
$(window).on('resize load', function() {
    var outerStage = owl.find('.owl-stage-outer');
    var outerWidth = Number(outerStage.css('width').replace('px', ''));
    var width = Number(owl.find('.owl-stage').css('width').replace('px', ''));
    if (width < outerWidth)
        outerStage.css('left', Math.ceil(outerWidth - width)/2 + 'px');
    else 
        outerStage.css('left',0);
});

    OriginalL'auteur Vlad Alivanov

  6. 0

    C'est aussi une solution qui a fonctionné pour moi à l'aide de flexbox.

    .owl-stage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
}

    OriginalL'auteur Marcus Christiansen