'Multiple Carousels per Page Bootstrap 5

I'm having trouble getting multiple Bootstrap carousels to function properly on one page. I know that Bootstrap says to set unique IDs for each new carousel, but for the life of me I can't figure out how exactly to do that. As such, only one carousel works properly when I run the code, and the indicators on the second carousel control the first one. Here is what I have, I just need to know how to make the second carousel control itself rather than controlling the first one.

<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>
htmltwitter-bootstrapbootstrap-5bootstrap-carousel


Solution 1:[1]

First you need to set an id for each carousel. This is done in the outermost div of the carousel (the first div).

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

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

After that, you need to change each reference of the id. So if your id was called "myCarousel" and you created another one with the id "myCarousel2", you will need to look for every reference and update (search for #myCarousel and replace for #myCarousel2).

I have placed an example in the link below.

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

Solution 2:[2]

For some reason carousel controls added with anchor tag didn't work for me. The below code didn't work:

<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>

While control with button tag worked

<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>

Hope this helps somebody

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Franco Pan
Solution 2 Kiran Sone

Related Questions