javascript 少于 X 项时的 Center OwlCarousel

Center OwlCarousel when less than X items

提问by pstenstrm

We're using OwlCarousel 1.3.3 on our responsive site. We've set the max number of items to 4.

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

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

As long as the carousel contains 4 or more images everything works fine. But when an editor only adds 3 or less items we want those items to be centered on the page. Right now they're "left aligned" and it doesn't look very good.

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

The option itemsScaleUpis not what I'm looking for. If items is set to 4 but the carousel only contains 1 item that item would get too big.

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

I've found these issues on github:
https://github.com/smashingboxes/OwlCarousel2/issues/35
https://github.com/OwlFonk/OwlCarousel/issues/417
But nothing I find helpful.

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

You can see the issue in this codepen.

你可以在这个codepen 中看到这个问题。

Update:
Looking through the source of OwlCarousel you'll see that the .owl-wrapperelements width gets multiplied with 2. But I can't figure out why, and if it's safe to remove the multiplier.

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

I've opened this github issueto try to get some clarification.

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

采纳答案by pstenstrm

OwlCarousel has a 2x multiplier on the .owl-wrapperelements width. This multiplier makes it incredibly hard to center the carousel when it's less than full.

OwlCarousel 在.owl-wrapper元素宽度上有 2 倍的乘数。当转盘未满时，此乘数使转盘居中变得异常困难。

However, this multiplier doesn't seem to have any reason to be there. Nothing seems to break when I remove it. So that's what I did, the updated owl.carousel.js can be found here: https://github.com/Vinnovera/OwlCarousel/tree/remove-width-multiplier

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

And I added this CSS (which is not included in the repo):

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

.owl-wrapper {
    margin: 0 auto;
}

回答by Radames E. Hernandez

In the new version of Owl Carousel 2, you need add this css:

在新版本的 Owl Carousel 2 中，你需要添加这个 css：

.owl-stage{
    margin: 0 auto;
}

this work's for me in the version 2.

这项工作在第 2 版中适合我。

Regards!

问候！

回答by Vlad Los

Instead of changing source you can use afterInit and ufterUpdate methods. Something like this:

您可以使用 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');
                            });
                        }
                    });

回答by Tóth Balázs

Change this:

改变这个：

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

And this

还有这个

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

回答by Vlad Alivanov

Solution for Owlcarousel2

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

回答by Marcus Christiansen

This is also a possible solution which has worked for me using flexbox.

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

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