Question

我在我的页面中使用Owl轮播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({

Answer 2

你所拥有的应该可以正常工作，但是猫头鹰旋转木马去除窗口大小调整。因此，如果您通过调整浏览器窗口大小进行测试，请确保停止足够长的时间以便重新调整轮播。如果没有这样做，我会设置responsiveBaseElement，看看是否有所作为。更多here。

Owl Carousel 2没有在调整窗口大小

2 个答案: