Twitter Bootstrap Carousel - access current index

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

See here

// EDIT

Bootstrap changed repos, new link

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

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

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

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

$(".active", e.target).index() works. Where e from:

carousel.on("slid", function (e) {
   $(".active", e.target).index();
});

Found on: https://github.com/twitter/bootstrap/pull/2404#issuecomment-4589229

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

Here's what I came up with after reading fat's comment in @Quelltextfabrik's answer.

var carousel = $("#myCarousel");

carousel.on("slid", function () {
    var all = carousel.find('.item'),
        active = carousel.find('.active'),
        slidTo = all.index(active);

    console.log("Slid - Slid To: " + slidTo);
    });

carousel.on("slide", function () {
    var all = carousel.find('.item'),
        active = carousel.find('.active'),
        slidFrom = all.index(active);

    console.log("Slide - Slid From: " + slidFrom);
});

I was able to access the slide index using a jquery function from the bootstrap documentation.

$('#carousel').on('slide.bs.carousel', function(event) {
    alert(event.from);
   // You can use use 'event.from' in whatever way works best for you here
}

.from on the event will give you the slide where the slide instance occurs. .to will give you the slide where the slide instance is going to. Using slide.bs.carousel will execute the function before the slide animation, slid.bs.carousel will execute the function after the slide animation but the returned slide number will be the same.

There's a few other properties that the slide and slid events give you access to, I recommend checking them out on the carousel documentation page.

Note: I am using bootstrap 4.3.1.