Question

我在一个动态内容项目中使用猫头鹰旋转木马2，可以添加无限量的幻灯片。

所以可能会有一个实例，其中只有三个幻灯片或一个实例，其中有六个。

我希望的功能是，如果幻灯片少于四张（轮播一次显示四个项目），则添加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时，它将删除拖动功能，无论有多少项。这意味着你看不到超过4个（如果有的话）。

谢谢，杰

Answer 1

请参阅此答案，您可以根据自己的需要进行调整。

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

这是我使用的代码：

注意我使用基于item_count的变量值，如果只存在.item的1，则应用＆＃34; false＆＃34; to：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
  });
});

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

1 个答案: