CODEWITHSUNDEEP
javascriptjqueryowl-carouselowl-carousel-2
Agata
Agata

Reputation: 362

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

Upvotes: 1

Views: 2937

Answers (2)

Stefan Pavlov
Stefan Pavlov

Reputation: 508

This can be done with an option:

loop: false

Does what you want.

Upvotes: 1

Aleksandr Abramov
Aleksandr Abramov

Reputation: 540

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

Upvotes: 2

Related Questions