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

Question

我希望使用 Bootstrap 3 的 Carousel 插件输出当前幻灯片编号。理想情况下，我希望将其作为轮播 div 下方的文本。例如:

[此处轮播]
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/ ，希望您会发现它有用。