每页多个轮播 Bootstrap 5

Posted 2023-05-08

【中文标题】每页多个轮播 Bootstrap 5

【英文标题】：Multiple Carousels per Page Bootstrap 5

【发布时间】：2021-08-31 20:54:39

【问题描述】：

我无法让多个 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" >
        </div>
        <div class="carousel-item">
          <img src="img/p1About.png" class="d-block w-100" >
        </div>
        <div class="carousel-item">
          <img src="img/p1Bio.png" class="d-block w-100" >
        </div>
        <div class="carousel-item">
          <img src="img/p1Future.png" class="d-block w-100" >
        </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" >
        </div>
        <div class="carousel-item">
          <img src="img/p1About.png" class="d-block w-100" >
        </div>
        <div class="carousel-item">
          <img src="img/p1Bio.png" class="d-block w-100" >
        </div>
        <div class="carousel-item">
          <img src="img/p1Future.png" class="d-block w-100" >
        </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>

【问题讨论】：

您无法找到一种方法来更改 html 中 carousel div 的 id=.. 属性？

【参考方案1】：

首先，您需要为每个轮播设置一个 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/***-67995857?file=index.html