web-dev-qa-db-fra.com

Centre OwlCarousel lorsque moins de X éléments

Nous utilisons OwlCarousel 1.3.3 sur notre site responsive. Nous avons défini le nombre maximal d'éléments à 4.

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

Tant que le carrousel contient 4 images ou plus, tout fonctionne correctement. Mais lorsqu'un éditeur ajoute seulement 3 éléments ou moins, nous voulons que ces éléments soient centrés sur la page. En ce moment, ils sont "laissés alignés" et cela ne semble pas très bon. 

L'option itemsScaleUp n'est pas ce que je recherche. Si l'élément est défini sur 4 mais que le carrousel ne contient qu'un élément, cet élément devient trop volumineux. 

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

Vous pouvez voir le problème dans ce codepen .

Mise à jour:
En regardant à travers la source de OwlCarousel, vous verrez que la largeur des éléments .owl-wrapper est multipliée par 2. Mais je ne peux pas comprendre pourquoi et s'il est prudent de supprimer le multiplicateur.

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

javascriptcsscarouselowl-carousel
9
pstenstrm

OwlCarousel a un multiplicateur de 2x sur la largeur des éléments .owl-wrapper. Ce multiplicateur rend incroyablement difficile le centrage du carrousel lorsqu'il n'est pas plein. 

Cependant, ce multiplicateur ne semble pas avoir de raison d'être là. Rien ne semble se briser quand je le retire. C'est donc ce que j'ai fait, le fichier owl.carousel.js mis à jour peut être trouvé ici: https://github.com/Vinnovera/OwlCarousel/tree/remove-width-multiplier

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

.owl-wrapper {
    margin: 0 auto;
}
9
pstenstrm

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

.owl-stage{
    margin: 0 auto;
}

ce travail est pour moi dans la version 2.

Cordialement!

12
Radames E. Hernandez

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

        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');
                            });
                        }
                    });
4
Vlad Los

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);
});
1
Vlad Alivanov

Change ça:

.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 ça

.owl-carousel {
    display: none;
    width: 100%;
    text-align:center;
}
1
Tóth Balázs

C'est aussi une solution possible qui a fonctionné pour moi en utilisant flexbox.

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