引导程序 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更改为data ride、数据target和数据slide(正如我在视频教程中看到的(，按钮确实有效，但按钮看起来很奇怪(小得多，有白色边框(。

此外，如何使滑块仅通过指示器按钮工作而不自动滑动？

Answer 1

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

以下是使用您的代码的工作片段。

.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"添加到转盘分区中