Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

    
        <div id="slideshow" class="carousel slide mb-4" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="../assets/img/modern-building-1.jpg" class="img-fluid" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="../assets/img/modern-building-2.jpg" class="img-fluid" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="../assets/img/modern-building-3.jpg" class="img-fluid" alt="...">
                </div>
            </div>
            <a class="carousel-control-prev" href="#slideshow" role="button" data-slide="prev">
                <i class="material-icons icon-lg" aria-hidden="true">arrow_back_ios</i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#slideshow" role="button" data-slide="next">
                <i class="material-icons icon-lg" aria-hidden="true">arrow_forward_ios</i>
                <span class="sr-only">Next</span>
            </a>
            <ol class="carousel-indicators">
                <li data-target="#slideshow" data-slide-to="0" class="active"></li>
                <li data-target="#slideshow" data-slide-to="1"></li>
                <li data-target="#slideshow" data-slide-to="2"></li>
            </ol>
        </div>
    

Bootstrap Documentation