猫头鹰旋转木马 - 自动宽度，最后一项从堆栈中拉出

Question

我在使用 OWL CAROUSEL 2 时遇到了奇怪的问题。我正在为 12 个表格创建简单的轮播，但是当使用选项“autoWidth”时，最后一个表格会从轮播堆栈中拉出。

演示

如果你打开小提琴，一年中的每个月都有轮播。在轮播的最后，没有十二月，但是如果你查看源代码，你可以看到十二月是有的。由于某种原因，OWL 轮播插件将退出 12 月。

有什么想法吗？预先，非常感谢！

Answer 1

在CSS中为

.owl-stage

类添加仅显示flex，并为较小的设备添加jS功能。

CSS

.owl-stage{display:flex}

JS

  $('.owl-carousel').owlCarousel({   
   loop: false,   
   autoWidth:true, 
   margin:10,
   nav:true,
   responsive:{
    0:{
     items:1,
     autoWidth:false 
    },
    768:{
     items:3
    }
   } 
 });  

Answer 2

我也刚刚遇到这个问题。 我以一种糟糕的方式修复了它，但它正在工作。在两种浏览器中。 问题出在

owl-stage

元素上。 owl carousel lib 计算了 width 属性，但这些项目不适合包装器。 所以我必须在

init

事件发生后调用一个函数并向其添加

100px

。 我使用了 setTimeout 函数。我知道这是一个非常糟糕的方法，但是在我的项目中，发生了很多 js 函数，并且并不总是获得正确的

width

属性（有时我得到

undefined

）

所以代码是：

$('.owl-carousel').owlCarousel({
        margin:90,
        nav:true,
        dots:true,
        autoWidth:true,
        afterInit: setWidth()
    });

    function setWidth(){
        setTimeout(function(){
            var carWidth = $('.owl-stage').width() + 100;
            $('.owl-stage').width(carWidth);
        },200);

    }

我确信没有

setTimeout

它也能工作，但截止日期不能等待 （*感觉不好）。

希望有帮助！

Answer 3

我通过在启动后刷新猫头鹰旋转木马找到了解决方案。 使用以下语法

YourCarouselName.trigger('refresh.owl.carousel');

这是整个代码的示例

var YourCarouselName = $('.YourOwlCarouselClassName').owlCarousel({
    margin:5,
    loop:false,
    dots:false,
    nav:false,
    autoWidth:true,
    afterInit: setWidth()
});
function setWidth(){
    setTimeout(()=>{YourCarouselName.trigger('refresh.owl.carousel');},1);
}

解决方案灵感来自cs.matyi对此问题的回答