如何正确获取Bootstrap轮播中active类carousel-item的索引编号

问题原因 #

你遇到的索引错位是因为监听的事件类型不对：slide.bs.carousel是Bootstrap轮播切换动作开始前触发的事件，此时.carousel-item上的active类还没完成切换，所以你获取到的永远是上一张幻灯片的索引。

修复方案 #

方案1：替换监听事件（最简单）

将监听的事件替换为slid.bs.carousel，这个事件会在轮播切换动画完全结束、active类更新完成后触发，仅需要修改事件名即可：

var totalItems = $('.carousel-item').length;
var currentIndex = $('.carousel-item.active').index() + 1;

var myCarousel = document.getElementById('carouselExampleIndicators')
// 仅把事件名slide改成slid即可
myCarousel.addEventListener('slid.bs.carousel', function() {
  currentIndex = $('.carousel-item.active').index() + 1;
  $('#slide').text('' + currentIndex + ' / ' + totalItems + '');
});

方案2：直接读取事件对象的内置属性（性能更高）

不需要查询DOM获取激活元素，直接用轮播事件自带的目标索引属性，就算在切换开始阶段调用也能拿到正确值：

var totalItems = $('.carousel-item').length;
var currentIndex = $('.carousel-item.active').index() + 1;

var myCarousel = document.getElementById('carouselExampleIndicators')
myCarousel.addEventListener('slide.bs.carousel', function(e) {
  // e.to就是即将切换到的幻灯片索引，从0开始计数
  currentIndex = e.to + 1;
  $('#slide').text('' + currentIndex + ' / ' + totalItems + '');
});

内容的提问来源于stack exchange，提问作者Behseini