每页多个轮播 Bootstrap 5

Question

我无法让多个 Bootstrap 轮播在一个页面上正常运行。我知道 Bootstrap 说要为每个新轮播设置唯一 ID，但对于我来说，我无法弄清楚如何做到这一点。因此，当我运行代码时，只有一个轮播正常工作，第二个轮播上的指示器控制第一个轮播。这就是我所拥有的，我只需要知道如何让第二个轮播控制自己而不是控制第一个。

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="img/p1Home.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="img/p1About.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="img/p1Bio.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="img/p1Future.png" class="d-block w-100" alt="...">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="img/p1Home.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="img/p1About.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="img/p1Bio.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="img/p1Future.png" class="d-block w-100" alt="...">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>

Answer 1

首先您需要为每个轮播设置一个id。这是在旋转木马的最外层 div 中完成的（第一个 div）。

<!--First Carousel-->
<div id="myCarousel"> 
...
</div>

<!--Second Carousel-->
<div id="myCarousel2"> 
...
</div>

之后，您需要更改id的每个引用。因此，如果您的 ID 名为“myCarousel”并且您创建了另一个 ID 为“myCarousel2”的 ID，则您将需要查找每个参考和更新（搜索#myCarousel 并替换为#myCarousel2）。

我在下面的 link 中放了一个例子。

https://stackblitz.com/edit/Whosebug-67995857?file=index.html

Answer 2

由于某些原因，添加了锚标记的轮播控件对我不起作用。以下代码无效：

<a class="carousel-control-prev" href="#carouselOne" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
</a>

虽然带有按钮标签的控件有效

<button class="carousel-control-prev" type="button" data-bs-target="#carouselOne" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
</button>

希望这对某人有所帮助

每页多个轮播 Bootstrap 5

Multiple Carousels per Page Bootstrap 5

html

twitter-bootstrap

bootstrap-5

bootstrap-carousel