如何使我的轮播指示器具有交互性，并在按下第 n 个指示器时移动到第 n 个轮播项目?

Question

所以我今天刚刚做了我的第一个轮播，我偶然发现了这个问题。我的下一个和上一个按钮可以工作，所以我认为我的脚本没有问题。提前非常感谢，即使你只是看了一遍

这是我的代码：

<div id="myCarousel" class="description-container">
<div id="testimonial-carousel" class="carousel slide" data-ride="false">
<ol class="darken carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active container-fluid">
<h4 class="testimonial-text">Me text 0!</h4>
</div>
<div class="carousel-item container-fluid">
<h4 class="testimonial-text">Me text 1!</h4>
</div>
<div class="carousel-item container-fluid">
<h4 class="testimonial-text">Me text 2!</h4>
</div>
<div class="carousel-item container-fluid">
<h4 class="testimonial-text">Me text 3!</h4>
</div>
<div class="carousel-item container-fluid">
<h4 class="testimonial-text">Me text 4!</h4>
</div>
</div>
<a class="darken carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span></a>
<a class="darken carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span></a>
</div>

Answer 1

你的左/右指示器连接到testimonial-carousel...虽然各个指标连接到myCarousel...两者都应与下面的代码片段相同：

/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
.carousel-item {
background: lightblue;
min-height: 200px
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div id="testimonial-carousel" class="carousel slide" data-ride="false">
<ol class="darken carousel-indicators">
<li data-target="#testimonial-carousel" data-slide-to="0" class="active"></li>
<li data-target="#testimonial-carousel" data-slide-to="1"></li>
<li data-target="#testimonial-carousel" data-slide-to="2"></li>
<li data-target="#testimonial-carousel" data-slide-to="3"></li>
<li data-target="#testimonial-carousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active container-fluid">
<h4 class="testimonial-text">Me text 0!</h4>
</div>
<div class="carousel-item container-fluid">
<h4 class="testimonial-text">Me text 1!</h4>
</div>
<div class="carousel-item container-fluid">
<h4 class="testimonial-text">Me text 2!</h4>
</div>
<div class="carousel-item container-fluid">
<h4 class="testimonial-text">Me text 3!</h4>
</div>
<div class="carousel-item container-fluid">
<h4 class="testimonial-text">Me text 4!</h4>
</div>
</div>
<a class="darken carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span></a>
<a class="darken carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span></a>
</div>