Question

我已经设置了owl-carousel滑块，它在jsbin中运行得非常好 http://jsbin.com/zivahewise/2/edit?html,css,output

响应和所有这一切。但是，当我在Boostrap 3上实现它时，响应功能无效。谁知道为什么？

谢谢！

Answer 1

也许你使用bootstrap类容器。你可以删除对于前 <div class='container'>并手动使用CSS。我想一切都会好起来的。 ;）

示例正确的代码 HTML：

<div class="owl-carousel owl-theme">
   <div> Your Content </div>
   <div> Your Content </div>
   <div> Your Content </div>
   <div> Your Content </div>
   <div> Your Content </div>
   <div> Your Content </div>
  <div> Your Content </div>
</div>

使用Javascript：

  $('.owl-carousel').owlCarousel({
    loop:true,
    nav:true, 
    margin:10, 
    responsiveClass:true,            
    responsive:{
      0:{
         items:1 
      },
      480:{
         items:2, // from 480 to 677 
        nav:false 
      },

     678:{
        items:4, 
        center:true 
     },

     960:{
        items:5, 
        margin:20,
       center:false 
    },

    1200:{
       items:6,
       loop:false,
       margin: 30,
    }
  }
 })

owl-carousel滑块不响应

1 个答案: