javascript - Add multiple bootstrap 4 carousel on a single page

Question

I'm having a trouble in using the new bootstrap 4, do anyone of you know how to add/insert multiple bootstrap carousel in one single page.

I've search many sites but they only give answers using bootstrap 3. thank you in advance for your help!

Answer 1

The demo page itself uses multiple carousels. There's nothing special you have to do except define each carousel with a unique id.

This is from the docs:
"Be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page."

https://v4-alpha.getbootstrap.com/components/carousel/

<div id="thisShouldBeUniquePerCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
   </a>
</div>