How to change options based on number of items in

问题:

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.

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.

Here is my 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
        }
    }
})

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).

Thanks, Jay

回答1:

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

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

here is my code for V2 with that in use:

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
  });
});