Add Multiple Bootstrap 4 Carousel On A Single Page

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

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

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

Solution 2:

You need to give unique IDs to each carousel, for further information you can visit official bootstarp carousel documentation here