为何未使用data-bs-ride属性，Bootstrap Carousel仍能初始化？

Bootstrap官方文档指出：“如果不使用data-bs-ride="carousel"来初始化轮播组件，您必须自行手动初始化。”

但下面的示例既没添加data-bs-ride="carousel"属性，也没有编写任何JavaScript代码进行手动初始化，轮播却能通过控制按钮正常切换，这是为什么？

示例代码 #

CSS 样式

.carousel {
  background: lightblue;
}

HTML 结构

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="carouselExampleControls" data-bs-interval="false" class="carousel slide" >
  <div class="carousel-inner" >
    <div class="carousel-item active">
      111
    </div>
    <div class="carousel-item" >
      222
    </div>
    <div class="carousel-item" >
      333
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target=".carousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target=".carousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

原因解析 #

核心原因是Bootstrap的data属性API会自动监听带有data-bs-slide这类交互属性的元素事件：

• 当你点击带有data-bs-slide="prev"或data-bs-slide="next"的控制按钮时，Bootstrap的JS会先定位到data-bs-target指向的轮播元素；
• 内部逻辑会检查该轮播是否已经完成初始化，如果没有，就会自动帮你完成初始化操作，再执行对应的轮播切换动作。

文档里提到的“必须手动初始化”，更多是针对**需要自动轮播（无需手动点击，轮播项自动切换）**的场景：如果没有设置data-bs-ride="carousel"且不手动初始化，轮播确实不会自动开始播放，但手动点击控制按钮的交互依然能正常工作——因为点击动作触发了Bootstrap的自动初始化逻辑。

另外你示例里设置了data-bs-interval="false"，本身就关闭了自动轮播功能，所以即使没有提前初始化，也完全不影响手动控制的使用。

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