5

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

[轮播在这里]
3 / 9

我可以使用 CMS 中的函数输出图像总数（例如上例中的 9 个），但我不知道如何获取活动幻灯片（例如上例中的 3 个。）

我到处搜索，发现一个似乎就是这样的线程：如何获取轮播的总数和当前幻灯片编号

不幸的是，我认为上述线程中的解决方案在 Bootstrap 版本 3 中不起作用。或者我可能只是把事情搞砸了。

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

4

1 回答 1

22

您可以使用.getActiveIndex()bootstrap 插件的方法（但我认为它在 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 总计 = carouselData.$items.length;

  // 创建我们要显示的文本。
  // 我们增加索引是因为人类不像机器一样计数
  var text = (currentIndex + 1) + " of " + total;

  // 你必须创建一个 HTML 元素 <div id="carousel-index"></div>
  // 在您的轮播下完成这项工作
  $('#carousel-index').text(text);
});

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

于 2013-11-12T06:00:25.510 回答