I have an owl carousel and I want to write a function which can check whether the number of items is equal to 1 and then disable corresponding navigation arrows.
Please help me do, this is what I tried (a function which will show number of items in the console and their respective index, but it isn't working)
var owl = $('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
dots: false,
responsive: {
0: {
items: 1,
nav: false,
},
767: {
items: 2,
nav: false
},
1000: {
items: 3,
nav: true,
loop: false
},
onDragged : callback
}
})
function callback() {
var items = event.items.count;
var item = event.item.index;
console.log(items,item);
}
Let's try in this way:
var owl = $('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
dots: false,
responsive: {
0: {
items: 1,
nav: false,
},
767: {
items: 2,
nav: false
},
1000: {
items: 3,
nav: true,
loop: false
},
onDragged : callback
}
})
function callback(event) {
var navValue = $(this).get(0).options.nav;
console.log('Old nav value = ' + navValue);
if (event.item.count == 1) {
//if total count of items = 1 - we change value
navValue = false;
//check if changed
console.log('New nav value = ' + navValue);
}
};
This can be done with an option:
loop: false
Does what you want.