Bootstrap 3 Carousel上的计数器显示的幻灯片数量不正确

Question

我有一个twitter bootstrap 3轮播，并有一些JavaScript来显示当前幻灯片和轮播中的幻灯片数量。

我遇到的问题是，直到转盘移动了一张幻灯片，计数器才显示计数，然后正确显示。 （例如ist在加载时应显示1 /（幻灯片数量），但是在您单击轮播导航箭头之前，它不会显示任何内容。

我在jsfiddle中添加了以下javascript代码和上下文示例

$('.carousel-stats').on('slid.bs.carousel', function () {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'))
var total = carouselData.$items.length;

// display the count in a id with a tag for styling
var text = (currentIndex + 1) + " / " + total;
$('#carousel-index-stats').text(text);
});

我不确定错误是否出在我的实际代码中，还是只是某个地方的错字，但我一直盯着它看了一个小时，而且不是明智的选择。 任何帮助/指导将不胜感激。

Answer 1

您有语法错误，请查阅文档

您必须将事件更改为

$('.carousel-stats').on('slide.bs.carousel', function () {

如文档所述

slide.bs.carousel   This event fires immediately when the slide instance method is invoked.
slid.bs.carousel    This event is fired when the carousel has completed its slide transition.