Search code examples
javascriptjqueryowl-carouselowl-carousel-2

Owl carousel checks item count for doing something


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

Solution

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