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

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

[CAROUSEL HERE]
3的9

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

我已经搜遍了所有并且找到了一个似乎就是这样做的线程： 如何获取旋转木马的总数和当前幻灯片数

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

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

Answer 1

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

 //收听'滑动旋转木马'活动
 //在每次幻灯片更改后触发我们的代码
 $（'。carousel'）。on（'slid.bs.carousel'，function（）{

   //此变量包含与轮播相关的所有类型的数据和方法
   var carouselData = $（this）.data（'bs.carousel'）;
   //编辑：在Boostrap> = 3.2中不起作用
   // var currentIndex = carouselData.getActiveIndex（）;
   var currentIndex = carouselData.getItemIndex（carouselData。$ element.find（'。item.active'））;
   var total = carouselData。$ items.length;

   //创建我们想要显示的文本。
   //我们增加了索引，因为人类不像机器一样计算
   var text =（currentIndex + 1）+“of”+ total;

   //你必须创建一个HTML元素
 
   //在你的旋转木马下进行这项工作
   $（ '＃旋转木马指数'）文本（文本）;
 }）;

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