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 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').index();

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



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

See here


Bootstrap changed repos, new link


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

    var slideFrom = $(this).find('.active').index();
    var slideTo = $(e.relatedTarget).index();
    console.log(slideFrom+' => '+slideTo);

This worked for me (Bootstrap 3)

$("#myCarousel").on('', 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('', function (e) {
  var active = $('.carousel-inner >');
  var from = active.index();
  var next = $(e.relatedTarget);
  var to = next.index();
  console.log(from + ' => ' + to);



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

$('#myCarousel').on('', 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.            // The index of the next item.

$(".active", works. Where e from:

carousel.on("slid", function (e) {

Found on:


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

var slider = $("#slider-wrapper")
        interval: 4000
    .bind('slid', function() {
        var index = $(this).find(".active").index();

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

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('', function(event) {
   // 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 will execute the function before the slide animation, 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.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.