Twitter Bootstrap Carousel - access current index

Daniel picture Daniel · Mar 25, 2012 · Viewed 66.1k times · Source

How do I get the current index from the carousel?

In this case I am using an unordered list. I know I could search through the list items to find the one with the 'active' CSS class, but I want to know if I can ask the carousel object directly.

Additional: being able to access the target index (on 'slide' event) would be handy also. Again, I can do this by searching with:

var idx = $('.carousel-inner li.active').index();

...and then adding/subtracting based on direction, but I am hoping for something cleaner.

Answer

Kyle picture Kyle · Feb 1, 2013

Instead of adding and subtracting from the current slide, try this on the 'slide' event:

$('.carousel').on('slide',function(e){
    var slideFrom = $(this).find('.active').index();
    var slideTo = $(e.relatedTarget).index();
    console.log(slideFrom+' => '+slideTo);
});