如何使用Owl Carousel 2根据轮播中的项目数更改选项? [英] How to change options based on number of items in the carousel using Owl Carousel 2?

问题描述

我正在将Owl Carousel 2用于动态内容的项目，并且可以添加无限数量的幻灯片.

I'm using Owl Carousel 2 on a project with dynamic content with an unlimited amount of slides that can be added.

因此，可能有一个只有三个幻灯片的实例或一个有六个幻灯片的实例.

So there could be an instance where there is only three slides or an instance where there is six.

我想要的功能是，如果幻灯片少于四个(轮播一次显示四个项目)，则添加mouseDrag: false和touchDrag: false选项.

My desired functionality is that if there is less than four slides (the carousel shows four items at a time), then add the mouseDrag: false and touchDrag: false options.

这是我的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
        }
    }
})

因此，当前，当视口宽度超过1024像素时，无论有多少个项目，视口都会删除拖动功能.这意味着您看不到超过4个(如果有).

So, currently when the viewport is over 1024px wide, it will remove the dragging functionality regardless of how many items there are. Which means you can't see any more than 4 (if there are any).

谢谢， 杰伊

推荐答案

请查看此答案，您可以根据自己的需要进行更改.

Please see this answer you can alter to fit what you need.

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

这是我使用的V2代码:

here is my code for V2 with that in use:

注意，我使用基于item_count的变量值，如果仅存在.item的1，则将"false"应用于:loop:true_false，nav:true_false ..

Notice I use the variable value based on the item_count and if 1 only of .item exists, then apply the "false" 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
  });
});

这篇关于如何使用Owl Carousel 2根据轮播中的项目数更改选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！