每页多个轮播 Bootstrap 5

问题描述

我无法让多个 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>

解决方法

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

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

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

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

我在下面的链接中放置了一个示例。

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