多响应猫头鹰旋转木马

我需要在某个页面中创建多个响应式猫头鹰轮播，我需要使用数据属性。 我这样工作，但我无法响应我的旋转木马，

jQuery的

var $carousel = $('.data-carousel[data-carousel]'); if ($carousel.length) { $carousel.each(function() { $(this).owlCarousel($(this).data('carousel')); }); } 

HTML

 
 
1
 
2
 
3
 
4
  

现在我需要响应我的猫头鹰旋转木马，我喜欢这个……

HTML

 
 
1
 
2
 
3
 
4
  

但响应性的选择，不起作用。 我在owl carousel文档中看到了这个：

jQuery的

 $('.owl-carousel').owlCarousel({ loop:true, margin:10, responsiveClass:true, responsive:{ 0:{ items:1, nav:true }, 600:{ items:3, nav:false }, 1000:{ items:5, nav:true, loop:false } } }); 

我需要在我的页面中创建一些动态和响应的轮播，我应该使用数据属性…

Answer 1

您将responsive参数作为标记中的字符串传递，并且最后有一个缺少的结束括号：

 "responsive": "{0:{items:1},768:{items:2},992:{items:3}" // ^ This bracket is not closed! 

删除引号，以便将其解析为对象而不是文字字符串：

 "responsive": {0:{"items":1},768:{"items":2},992:{"items":3}} 

换句话说，您的标记应如下所示：

 
 
1
 
2
 
3
 
4
  

Answer 2

如果您使用的是v1.3.3，请尝试以下操作…

 $(".myClass").owlCarousel({ autoPlay: false, navigation: true, items: 4, itemsCustom: [ [0, 1], [320, 1], [480, 2], [600, 2], [768, 2], [992, 3], [1200, 4] ] }); 

这就是我在解决方案中管理响应式大小调整的方法。