Bootstrap 5 轮播中的指示器不工作；停不下来

Question

我设置了轮播以显示 5 个视频。我在底部设置了指示器来导航：

<div class="col-lg-12 carousel slide" id="trailers" data-bs-ride="carousel" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#trailers" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#trailers" data-bs-slide-to="1" data-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#trailers" data-bs-slide-to="2" aria-label="Slide 3"></button>
      <button type="button" data-bs-target="#trailers" data-bs-slide-to="3" aria-label="Slide 4"></button>
      <button type="button" data-bs-target="#trailers" data-bs-slide-to="4" aria-label="Slide 5"></button>
    </div>
    <div class="trailerSlider carousel-inner" style="background-color: #000; padding-bottom: 50px;"> <!-- was livetv -->
      <div class="carousel-item active" >
        <div id="cover">
          Loading video...
        </div>
      </div>
      <div class="carousel-item">
        <div id="cover2">
          Loading video...
        </div>
      </div>
      <div class="carousel-item">
        <div id="cover3">
          Loading video...
        </div>
      </div>
      <div class="carousel-item">
        <div id="cover4">
          Loading video...
        </div>
      </div>
      <div class="carousel-item">
        <div id="cover5">
          Loading video...
        </div>
      </div>
    </div>
    
  </div>

然而，即使指示器正确显示，它们也不起作用，当我点击时没有任何反应，甚至没有错误消息。

如果我将 data-bs-ride、data-bs-target 和 data-bs-slide-to 更改为 data-ride、data-target 和 data-slide-to（如我在视频教程中看到的那样） , 按钮确实有效，但按钮看起来很奇怪（小得多且带有白色边框）。

另外，如何让滑块只通过指示器按钮工作而不是自动滑动？

Answer 1

你有一个重复的 data-bs-ride="carousel" 和一个额外的 data-slide-to="1" 但是当我运行你的代码时，这些错误不会阻止轮播工作。您没有在问题中包含工作片段，因此无法验证您使用的是哪个版本的 Bootstrap5。

这是一个使用您的代码的工作片段。

.carousel-item {
    height: 10.5rem;
}
#cover, #cover2, #cover3, #cover4, #cover5 {
    color: white;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

<div class="col-lg-12 carousel slide" id="trailers" data-bs-ride="carousel" data-bs-interval="false">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#trailers" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#trailers" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#trailers" data-bs-slide-to="2" aria-label="Slide 3"></button>
        <button type="button" data-bs-target="#trailers" data-bs-slide-to="3" aria-label="Slide 4"></button>
        <button type="button" data-bs-target="#trailers" data-bs-slide-to="4" aria-label="Slide 5"></button>
    </div>
    <div class="trailerSlider carousel-inner" style="background-color: #000; padding-bottom: 50px;">
        <!-- was livetv -->
        <div class="carousel-item active">
            <div id="cover">
                Loading video 1...
            </div>
        </div>
        <div class="carousel-item">
            <div id="cover2">
                Loading video 2...
            </div>
        </div>
        <div class="carousel-item">
            <div id="cover3">
                Loading video 3...
            </div>
        </div>
        <div class="carousel-item">
            <div id="cover4">
                Loading video 4...
            </div>
        </div>
        <div class="carousel-item">
            <div id="cover5">
                Loading video 5...
            </div>
        </div>
    </div>

</div>

要防止滑块自动工作，请将 data-bs-interval="false" 添加到轮播 div。

Bootstrap 5 轮播中的指示器不工作；停不下来

Indicators in Bootstrap 5 carousel not working; can't stop

carousel

bootstrap-5