Twitter Bootstrap Carousel - Access Current Index

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 clas

Solution 1:

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

Solution 2:

This worked for me (Bootstrap 3)

$("#myCarousel").on('slide.bs.carousel', function(evt) {
  console.debug("slide transition started")
  console.debug('current slide = ', $(this).find('.active').index())
  console.debug('next slide = ', $(evt.relatedTarget).index())
})

Solution 3:

It appears Bootstrap 4 finally has the native implementation of this.

https://github.com/twbs/bootstrap/pull/21668

$('#myCarousel').on('slide.bs.carousel', function(e){
  e.direction// The direction in which the carousel is sliding (either "left" or "right").
  e.relatedTarget// The DOM element that is being slid into place as the active item.
  e.from// The index of the current item.     
  e.to// The index of the next item.
});

Solution 4:

Nope, there is no way to access index or direction.

See here

// EDIT

Bootstrap changed repos, new link

Solution 5:

For bootstrap 3 it's

$('#myCarousel').on('slide.bs.carousel', function (e) {
  var active = $(e.target).find('.carousel-inner > .item.active');
  varfrom = active.index();
  var next = $(e.relatedTarget);
  var to = next.index();
  console.log(from + ' => ' + to);
})

from https://github.com/twbs/bootstrap/pull/2404#issuecomment-22362366