How to output current slide number in Bootstrap 3 Carousel?

Question

I'm looking to output the current slide number using Bootstrap 3's Carousel plugin. Ideally, I would like to have this as text underneath the carousel div. For example:

[CAROUSEL HERE]
3 of 9

I can output the total number of images (e.g. 9 in the example above) using a function in my CMS, but I can't figure out how to get the active slide (e.g. 3 in the example above.)

I have searched all over and found one thread that seemed to do just that: How to Get total and Current Slide Number of Carousel

Unfortunately, I think the solution in the above thread doesn't work in Bootstrap version 3. Or maybe I'm just messing something up.

Does anyone know if this is possible? I'm really hoping it is! Any help or suggestions would be greatly appreciated. Thanks!

Solution

You can use the .getActiveIndex() method of the bootstrap plugin (I don't think it works in bootstrap 2 though).

// Listen to the 'slid carousel' event
// to trigger our code after each slide change
$('.carousel').on('slid.bs.carousel', function () {

  // This variable contains all kinds of data and methods related to the carousel
  var carouselData = $(this).data('bs.carousel');
  // EDIT: Doesn't work in Boostrap >= 3.2
  //var currentIndex = carouselData.getActiveIndex();
  var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
  var total = carouselData.$items.length;

  // Create the text we want to display.
  // We increment the index because humans don't count like machines
  var text = (currentIndex + 1) + " of " + total;

  // You have to create a HTML element <div id="carousel-index"></div>
  // under your carousel to make this work
  $('#carousel-index').text(text);
});

Working demo here: http://jsfiddle.net/nUgy4/2/ , I hope you will find it useful.

Comments

[ornmnt]

thank you so much for your help! It's great to hear that there is a solution. Unfortunately, I'm afraid to admit that I'm still learning PHP and my JS skills are practically non-existent. I created a fiddle and I've tried to implement the code you suggested but I can't quite figure it out. Could you help me out a little bit? Have I added it correctly? And if so, what should I add to the html to output the X of X bit? Again, thank you so so much. Here is my fiddle: jsfiddle.net/nUgy4/1

[Romain Paulus]

I realize that my answer wasn't perfect, and in your jsfiddle you have used the bootstrap 2 instead of the bootstrap 3 javascript file. See my complete solution here: jsfiddle.net/nUgy4/2

[ornmnt]

Ack! Sorry to dredge this thread back up, @Romain Paulus, but I just upgraded from Bootstrap 3.1.1 to 3.2 and this is no longer working for me. I'm hoping there is a simple fix. If anyone could offer any help I'd really appreciate it. Thanks!

[Romain Paulus]

Bootstrap 3.2 removed the getActiveIndex() method. You need to replace it by carouselData.getItemIndex(carouselData.$element.find('.item.‌​active')).

[ornmnt]

You are a god. Thank you so so so so so much!