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"，但是当我运行您的代码时，这些错误不会阻止轮播的工作。您的问题中没有包含有效的 sn-p，因此无法验证您使用的是哪个版本的 Bootstrap 5。

这是一个使用您的代码的工作 sn-p。

.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。