Owl Carousel 2 无法调整窗口大小答案

【问题标题】：Owl Carousel 2 not working on resize windowOwl Carousel 2 无法调整窗口大小
【发布时间】：2015-11-30 13:39:09
【问题描述】：

我在我的页面中使用 Owl carousel 2，并且我希望有像这里这样的舞台填充选项： http://www.owlcarousel.owlgraphic.com/demos/stagepadding.html

这是我的 HTML：

 <div class="owl-carousel">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
 </div>

我的CSS：

 .item {
   background-image: url("myimage.png");
   background-repeat: no-repeat;
   background-size: contain;
   height: 10rem;
 }

还有我的 js：

 var owloptions = {
    stagePadding: 50,
    loop:true,
    margin:10,
    nav: true,
    dots: false,
    responsive:{
        0:{
            items:2
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
}

$('.owl-carousel').owlCarousel(owloptions);

我的问题是响应式不起作用。它仅适用于重新加载页面，但不适用于调整大小。我想知道css或js是否有问题？提前致谢

【问题讨论】：

标签： javascript jquery css responsive-design owl-carousel

【解决方案1】：

       responsive: {
              0: {
                items: 1,
                nav: true
              },
              600: {
                items: 3,
                nav: false
              },
              1000: {
                items: 5,
                nav: true,
                loop: false,
                margin: 20
              }
            }

在准备好的文档上试试这个

 $(document).ready(function() {
          $('.owl-carousel').owlCarousel({

【讨论】：

不幸的是，我认为甚至更糟。

【解决方案2】：

您所拥有的应该可以正常工作，但是 owl carousel 会消除窗口调整大小的抖动。因此，如果您通过调整浏览器窗口的大小进行测试，请确保您停下来的时间足够长，以便轮播重新调整。如果这样做不行，我会设置responsiveBaseElement 看看是否有区别。更多here。

【讨论】：