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

Question

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

[CAROUSEL HERE]
3/9

我可以使用CMS中的功能输出图像总数（例如上面示例中的9），但我无法弄清楚如何获取活动幻灯片（例如上面示例中的3）。

我已经搜遍过，发现了一个似乎就是这样做的话题：How to Get total and Current Slide Number of Carousel

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

有人知道这是否可行？我真的希望它是！任何帮助或建议将不胜感激。谢谢！

Answer 1

你可以使用bootstrap插件的.getActiveIndex()方法（虽然我不认为它在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/，我希望你会发现它很有用。