Skip to content Skip to sidebar Skip to footer

How To Change Options Based On Number Of Items In The Carousel Using 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 a

Solution 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 onesnavContainerClass: 'owl-buttons',
    dotsClass: 'owl-pagination',
    dotClass: 'owl-page',
    navText: [
    '',
    ''
    ],
    autoplayHoverPause:true, //falselazyLoad: true,
    dots:true// false
  });
});

Post a Comment for "How To Change Options Based On Number Of Items In The Carousel Using Owl Carousel 2?"