如何在按下第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>