jQuery获取当前激活轮播幻灯片及切换时获取新幻灯片问题

问题根源 #

你的代码失效主要有两个核心问题：

1. 事件名称错误：Bootstrap 轮播组件的幻灯片切换完成事件是slid.bs.carousel，不是你用的slid。
2. 选择器范围过宽：$('button.active')会匹配页面所有带active类的按钮，很容易拿到错误的索引值。

修复方案 #

方案一：精准选择器 + 正确事件 #

把选择器限定在当前轮播的指示器容器内，同时使用官方指定的事件名：

$('#carouselExampleIndicators').on('slid.bs.carousel', function() {
  // 仅在当前轮播的指示器里查找激活按钮
  let currentIndex = $('#carouselExampleIndicators .carousel-indicators button.active').index() + 1;
  alert(currentIndex);
});

方案二：利用轮播内置属性（更稳定） #

直接通过轮播实例获取当前索引，不依赖DOM结构，避免后续结构变动导致代码失效：

$('#carouselExampleIndicators').on('slid.bs.carousel', function(e) {
  // 获取轮播组件实例
  const carousel = $(this).data('bs.carousel');
  // 内置的_activeIndex是从0开始计数，加1转为常用的从1开始
  let currentIndex = carousel._activeIndex + 1;
  alert(currentIndex);
});

额外提示 #

• 如果你用的是Bootstrap 3，实例获取要改成$(this).data('carousel')，事件名称还是slid.bs.carousel。
• 优先选方案二，它的兼容性和稳定性更好，不受指示器DOM结构变化影响。

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