Home > Software design >  Owl carousel checks item count for doing something
Owl carousel checks item count for doing something

Time:10-22

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

CodePudding user response:

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