Question

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

如果你打开小提琴，一年中每个月都有旋转木马。在轮播结束时，没有12月，但是如果你查看源代码，你可以看到12月就在那里。出于某种原因，OWL轮播插件将12月拉出来。

有什么想法吗？提前，非常感谢！

Answer 1

仅在.owl-stage类的CSS中添加display 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的情况下工作，但截止日期不能等待（*感觉不好）。

希望它有所帮助！

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

2 个答案: