中心OwlCarousel当少于X项

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