javascript - 当少于 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 issue试图得到一些澄清。

Answer 1

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

.owl-stage{
    margin: 0 auto;
}

这个作品在版本 2 中是为我准备的。

问候!