Twitter Bootstrap Carousel - access current index

Question

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 \'

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

Answer 2

For bootstrap 3 it's

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

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

Answer 3

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

See here

// EDIT

Bootstrap changed repos, new link

Answer 4

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

Answer 5

I'm doing it like that, that works sort of very well ;)

var slider = $("#slider-wrapper")
    .carousel({
        interval: 4000
    })
    .bind('slid', function() {
        var index = $(this).find(".active").index();
        $(this).find("a").removeClass('pager-active').eq(index).addClass('pager-active');
    });

$("#slider-wrapper a").click(function(e){
    var index = $(this).index();
    slider.carousel(index);
    e.preventDefault();
});

Answer 6

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