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

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.

Answer 2

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

Answer 3

$(".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