如何在Bootstrap 3 Carousel中输出当前幻灯片编号？

Question

我想使用Bootstrap 3的Carousel插件输出当前的幻灯片编号.理想情况下,我希望将此文本作为旋转木马div下方的文本.例如:

[CAROUSEL HERE]
3 of 9

我可以使用CMS中的函数输出图像总数(例如上面示例中的9),但我无法弄清楚如何获取活动幻灯片(例如上面示例中的3).

我已经搜遍过,发现一个似乎就是这样做的线程:如何获取轮播的总数和当前幻灯片数

不幸的是,我认为上述线程中的解决方案在Bootstrap版本3中不起作用.或者我可能只是弄乱了一些东西.

有谁知道这是否可能？我真的希望它是!任何帮助或建议将不胜感激.谢谢!

Answer 1

你可以使用.getActiveIndex()bootstrap插件的方法(虽然我不认为它在bootstrap 2中有效).

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

这里的工作演示:http://jsfiddle.net/nUgy4/2/,我希望你会发现它很有用.