当少于 X 个项目时居中 OwlCarousel

Question

我们在响应式网站上使用 OwlCarousel 1.3.3。 我们已将最大项目数设置为 4。

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

只要轮播包含 4 张或更多图片，一切正常。 但是当编辑器只添加 3 个或更少的项目时，我们希望这些项目在页面上居中。 现在他们是“左对齐”的，看起来不太好。

选项itemsScaleUp不是我要找的。 如果项目设置为 4，但轮播仅包含 1 个项目，则该项目会变得太大。

我在 github 上发现了这些问题：
https://github.com/smashingboxes/OwlCarousel2/issues/35
https://github.com/OwlFonk/OwlCarousel/issues/417
但我觉得没有任何帮助。

您可以在此codepen中查看问题。

更新：
查看 OwlCarousel 的源代码，您会看到.owl-wrapper元素的宽度乘以 2。但我不知道为什么，也不知道删除乘数是否安全。

我已经打开了这个github 问题来尝试得到一些澄清。

Answer 1

在新版本的Owl Carousel 2中，您需要添加此css：

.owl-stage{
    margin: 0 auto;
}

这个工作对我来说是版本2。

问候！

Answer 2

OwlCarousel在.owl-wrapper元素宽度上有2倍的乘数。 这个倍增器使旋转木马在不到满的时候难以居中。

但是，这个乘数似乎没有任何理由存在。 当我删除它时似乎没有什么破坏。 这就是我所做的，更新后的owl.carousel.js可以在这里找到： https ： //github.com/Vinnovera/OwlCarousel/tree/remove-width-multiplier

我添加了这个CSS（它不包含在repo中）：

.owl-wrapper {
    margin: 0 auto;
}

Answer 3

您可以使用afterInit和ufterUpdate方法而不是更改源。 像这样的东西：

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

Answer 4

改变这个：

.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; }

还有这个

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

Answer 5

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);
});

Answer 6

这也是一个可能的解决方案，使用flexbox对我有用。

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

Answer 7

这适用于 Owl Carousel 2.3.4

.owl-carousel .owl-stage {
    margin: 0 auto;
}