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?"