javascript - Owl Carousel 2 无法在调整窗口大小上工作

Question

我在我的页面中使用 Owl carousel 2，我想像这里一样使用 Stage padding 选项: 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 出了问题？提前致谢

Answer 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({