Owlcarousel2: Getting the current index in OwlCarousel2

[jackyliang]

Hey Owl!

Absolutely love your plugin, especially with version number 2 which adds the URL hash functionality. With version 1 I had to implement hacks with using the id of each image to navigate to the hash, but it was incredibly buggy and consistently break the carousel. Version 2 has solved this!

My question is - in OwlCarousel2, how do I get the current item? In OwlCarousel1, I could simply do this.owl.currentItem. Looking at the API docs for OwlCarousel2 here: http://www.owlcarousel.owlgraphic.com/docs/api-events.html#callbacks

$('.owl-carousel').owlCarousel({
    onDragged: callback
});
function callback(event) {
    ...
}

And finally:

event.item.index

The above example _should_ give you the current index? The only thing I am getting is:

Uncaught TypeError: Cannot read property 'index' of undefined

How do I get the current index in OwlCarousel2?

Found the fix:

    // Listen to owl events:
    owl.on('changed.owl.carousel', function(event) {
        var currentItem = event.item.index;
        window.location.hash = currentItem + 1;
    })

[greg5green]

@jackyliang Thanks for updating your question with your solution :) :+1:

[baberuth22]

This doesn't exactly solve my problem. I would like to use dragged instead of changed to detect manual change and ignore programmatic changes. Then I'd like the ACTIVE dragged to slide, not the slide that was dragged.

[SergeyMell]

This worked for me. It works for looped carousel either:

owl.on('changed.owl.carousel', function (e) {
            if (e.item) {
                var index = e.item.index - 1;
                var count = e.item.count;
                if (index > count) {
                    index -= count;
                }
                if (index <= 0) {
                    index += count;
                }
                return index;
            }
        });

[Rotmistrz]

Getting current item's index is still creazy.. Maybe it works when the carousel isn't a loop, but when I have a loop it gets completely random numbers.

I try with
$(event.target).find(".owl-item.active").next()
but it sometimes crashes.

Could you simply make a property or function to get the current item or index of it, with no dependency of event's type, no matter if it is translated, dragged or something else.. It is tiring that a such basic function isn't provided.

The solution which is given above doesn't work too.

[charlie8230]

The event.item.index seems to be the index of the active slide within the stage's child node collections.

It would be nice to have a more direct way of doing this but it works:
$owlCarousel.on('translated.owl.carousel', function (event) { let currentIndex = event.item.index; let currentSlide = event.relatedTarget.$stage.children()[currentIndex]; // Do something with the slide });

[SandyWyper]

I was using the carousel as a navigation. I did something similar, but instead i identified the ow-item with a class of 'center'. Note that this only identifies the correct slide if you use ' ... on(translated.owl..... ', and not ' ....on(changed.owl..... '

   // after the carousel has moved on a space
  $myCarousel.on('translated.owl.carousel', function() {

        // get the index of the section we want to display
      var centeredIconIndex = getCenteredElementIndex();

        // activate a function to display the appropriate section
      doSomethingWithIndex(centeredIconIndex);

  });


  function getCenteredElementIndex() {
        // return the 'data-set' : 'section-index' of the icon DOM element 
        // with the class of 'center'
    return $('.center').children().data('section');
  }

  function   doSomethingWithIndex(index) {
    // toogle the reveal class on the desired section and the one currently displayed
    $( '.reveal').removeClass('reveal');
    $( '#section-' + index).toggleClass('reveal');
  }

[BilalHalayqa]

.on('changed.owl.carousel', function(e) {
          var index = e.property.value - Math.ceil( e.item.count / 2 );
          if(index < 0) index = e.item.count;
          else if(index > (e.item.count-1)) index = 1;
          anotherSlider.trigger('to.owl.carousel', (index));
      });

[dipakCrayon]

This worked for me. It works for looped carousel either:

owl.on('changed.owl.carousel', function (e) {
            if (e.item) {
                var index = e.item.index - 1;
                var count = e.item.count;
                if (index > count) {
                    index -= count;
                }
                if (index <= 0) {
                    index += count;
                }
                return index;
            }
        });

This worked for me

[krunal2212]

Enable Pagination and follow that code

$(document).ready(function(){
var $owl = $('.product-sliderescapeHtml($sliderId) ?>');
$owl.on('initialized.owl.carousel changed.owl.carousel resized.owl.carousel', function(e) {
setTimeout(function () {
var slidesToShow = parseInt(escapeHtml($slider->getSlidesToShow()) ?>);
var slidesToScroll = parseInt(escapeHtml($slider->getSlidesToScroll()) ?>);
var totalItems = parseInt();
var currentIndex = parseInt( parseInt($owl.find('.owl-dot.active').index()) + 1);
var totalSlides = $owl.find('.owl-dots .owl-dot').length;
$owl.find('.owl-next,.owl-prev').removeClass('disablednav');
if(currentIndex >= totalSlides)
{
$owl.find('.owl-next').addClass('disablednav');
}
else if( currentIndex == 1)
{
$owl.find('.owl-prev').addClass('disablednav')
}
}, 500);

    });
});