Skip to main content

Carousel

Create an image gallery with the carousel component.

                
                    <div id="carouselGallery" class="carousel carousel-gallery slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="..." alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="..." class="d-block w-100" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="..." class="d-block w-100" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="..." class="d-block w-100" alt="">
                            </div>
                            <a class="carousel-control-prev" href="#carouselGallery" 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="#carouselGallery" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>

                        <ol class="carousel-indicators row mx-0 mx-lg-n1 mb-0">
                            <li data-target="#carouselGallery" data-slide-to="0" class="col px-0 px-lg-1 active">
                                <img src="..." alt="" class="img-fluid img-thumbnail">
                            </li>
                            <li data-target="#carouselGallery" data-slide-to="1" class="col px-0 px-lg-1">
                                <img src="..." alt="" class="img-fluid img-thumbnail">
                            </li>
                            <li data-target="#carouselGallery" data-slide-to="2" class="col px-0 px-lg-1">
                                <img src="..." alt="" class="img-fluid img-thumbnail">
                            </li>
                            <li data-target="#carouselGallery" data-slide-to="3" class="col px-0 px-lg-1">
                                <img src="..." alt="" class="img-fluid img-thumbnail">
                            </li>
                        </ol>
                    </div>
                
            

Bootstrap DocumentationExternal link