owl-carousel 滑块无法响应地工作

【问题标题】：owl-carousel slider not working responsivelyowl-carousel 滑块无法响应地工作
【发布时间】：2015-01-01 14:20:24
【问题描述】：

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

响应和所有这些。但是，当我在 Boostrap 3 上实现它时，响应功能不起作用。有人知道为什么吗？

谢谢！

【问题讨论】：

请参考这个 Stackoverflow 问题stackoverflow.com/questions/28070885/…

标签： responsive-design owl-carousel

【解决方案1】：

也许您使用引导类容器。你可以删除例如。 <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,
    }
  }
 })

【讨论】：