如何使用猫头鹰旋转木马2根据旋转木马中的物品数量更改选项？

我正在一个项目中使用Owl Carousel 2，该项目具有动态内容，可以添加无限量的幻灯片。

因此，可能存在仅存在三个幻灯片的实例或存在六个幻灯片的实例。

我想要的function是，如果少于四张幻灯片（轮播一次显示四个项目），则添加mouseDrag: false和touchDrag: false选项。

这是我的JS：

 $('.owl-carousel').owlCarousel({ loop:false, margin:20, responsive : { // breakpoint from 0 up 0: { items: 1, mouseDrag:true, touchDrag:true }, // breakpoint from 480 up 500: { items: 2, mouseDrag:true, touchDrag:true }, // breakpoint from 768 up 740: { items: 3, mouseDrag:true, touchDrag:true }, // breakpoint from 1024 up 980: { items: 4, mouseDrag:false, touchDrag:false } } }) 

因此，目前当视口宽度超过1024px时，无论有多少项都会删除拖动function。 这意味着你看不到超过4个（如果有的话）。

谢谢，杰伊

Answer 1

请参阅此答案，您可以根据需要改变。

http://stackoverflow.com/a/33252395/3794783

这是我的V2代码，正在使用中：

注意我使用基于item_count的变量值，如果只存在.item的1，则将“false”应用于：loop：true_false，nav：true_false ..

 $(function () { var owl_instance = $('.sectionlist .owlcarousel'); var item_count = parseInt(owl_instance.find('.item').length); var true_false = 0; if (item_count <=1) {true_false = false;} else {true_false = true;} // // control nav visiblity thumbs shown vs thumbs allowed visible // see: http://stackoverflow.com/a/33252395/3794783 // owl_instance.on('initialized.owl.carousel resized.owl.carousel', function(e) { $(e.target).toggleClass('owl-nonav', e.item.count <= e.page.size); }); owl_instance.owlCarousel({ themeClass: 'owltheme-smallnav', items:3, responsive:{ 0:{items:1,nav:true}, 605:{items:3}, 670:{items:3}, 1250:{items:3}, 1520:{items:3} }, //margin:0, navRewind:false, // Go to first/last. // ***************** loop:true_false, nav:true_false, // backport the classes to older used ones navContainerClass: 'owl-buttons', dotsClass: 'owl-pagination', dotClass: 'owl-page', navText: [ '', '' ], autoplayHoverPause:true, //false lazyLoad: true, dots:true // false }); });