如何在Bootstrap 3 Carousel中输出当前幻灯片编号? [英] How to output current slide number in Bootstrap 3 Carousel?

问题描述

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

[CAROUSEL HERE]
9之3

我可以使用CMS中的功能输出图像总数(例如上例中的9张)，但是我不知道如何获取活动幻灯片(例如上例中的3张).

我到处搜索，发现一个似乎可以完成此任务的线程:解决方案

您可以使用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');
  //  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/，希望您会发现它很有用

I'm looking to output the current slide number using Bootstrap 3's Carousel plugin. Ideally, I would like to have this as text underneath the carousel div. For example:

[CAROUSEL HERE]
3 of 9

I can output the total number of images (e.g. 9 in the example above) using a function in my CMS, but I can't figure out how to get the active slide (e.g. 3 in the example above.)

I have searched all over and found one thread that seemed to do just that: How to Get total and Current Slide Number of Carousel

Unfortunately, I think the solution in the above thread doesn't work in Bootstrap version 3. Or maybe I'm just messing something up.

Does anyone know if this is possible? I'm really hoping it is! Any help or suggestions would be greatly appreciated. Thanks!

解决方案

You can use the .getActiveIndex() method of the bootstrap plugin (I don't think it works in bootstrap 2 though).

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

Working demo here: http://jsfiddle.net/nUgy4/2/ , I hope you will find it useful.

这篇关于如何在Bootstrap 3 Carousel中输出当前幻灯片编号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！