Bootstrap4轮播指示器active状态无法正常切换

active类切换失效是两个问题共同导致的：

• 初始化顺序冲突：Bootstrap会在DOM加载完成后自动识别带data-ride="carousel"属性的轮播组件并完成初始化，初始化时会一次性缓存所有指示器li的引用。你写在$(document).ready里的动态生成指示器、移动DOM的逻辑执行时机晚于Bootstrap的自动初始化，Bootstrap内部根本没拿到你后续生成的li元素，切换幻灯片时自然不会更新这些li的active类。
• DOM操作逻辑有问题：你的3个轮播项里各有一个.carousel-indicators-container容器，直接调用$carouselIndicatorsContainer.append($carouselIndicators)时，唯一的指示器ol节点会被依次追加到所有匹配的容器中，最终只停留在最后一个轮播项的容器里，和Bootstrap初始化时预期的DOM结构不匹配，也会导致类切换逻辑失效。

先调整HTML，删掉轮播根节点上的data-ride="carousel"属性，阻止Bootstrap提前初始化组件：

<!-- 原代码 -->
<div id="carouselBanner" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- 修改后 -->
<div id="carouselBanner" class="carousel slide" data-interval="false">

再调整jQuery逻辑，等所有DOM操作（生成指示器、移动位置）全部完成后，再手动初始化轮播：

$(document).ready(function() {
  // 用id选择器锁定目标轮播，避免页面存在多个轮播时选择器冲突
  var $carousel = $('#carouselBanner');
  var $carouselIndicators = $carousel.find('.carousel-indicators');
  // 桌面端固定取第一个容器放置指示器
  var $carouselIndicatorsContainer = $carousel.find('.carousel-indicators-container').first();
  var $carouselItem = $carousel.find('.carousel-item');

  // 动态生成指示器li
  $carouselItem.each(function(index) {
    var activeClass = index === 0 ? 'active' : '';
    $carouselIndicators.append(`<li data-target="#carouselBanner" data-slide-to="${index}" class="indicator ${activeClass}"></li>`);
  });

  // 把指示器插入到目标容器
  $carouselIndicatorsContainer.append($carouselIndicators);

  // DOM操作全部完成后，手动初始化轮播组件
  $carousel.carousel();
});

如果你需要在移动端每个轮播项内都显示指示器，不要直接移动同一个ol节点，而是复制一份指示器副本分别追加到移动端的容器中，再监听轮播的slid.bs.carousel事件，手动同步所有副本指示器的active状态即可。

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