Owl旋转木马-自动宽度，最后一项从堆栈中取出。

Question

我遇到了猫头鹰旋转木马2的奇怪问题，我正在为12个表创建简单的旋转木马，但是当使用选项"autoWidth“时，最后一个表会从旋转木马堆栈中提取出来。

演示

如果你打开小提琴，一年中每个月都有旋转木马。在旋转木马的末尾，没有十二月，但是如果你检查源代码，你可以看到十二月在那里。出于某种原因，猫头鹰的旋转木马插件将于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旋转木马库计算宽度属性，但这些项不适合包装。因此，在init事件发生后，我必须调用一个函数，并将有关100px的内容添加到其中。我将setTimeout函数与我所知道的.Very坏方法一起使用，但是在我的项目中有很多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，它可以工作，但截止日期不能等待(*为它感到难过)。

希望能帮上忙！