/bootstrap-carousel-autoplay

Responsive Carousel autoplay built with Bootstrap 5. Examples of how to turn on and turn off the carousel autoplay.

Primary LanguageSCSSOtherNOASSERTION

Responsive Carousel autoplay built with Bootstrap 5. Examples of how to turn on and turn off the carousel autoplay.

Check out Bootstrap Carousel autoplay Documentation for detailed instructions & even more examples.

Basic example

Bootstrap Carousel autoplay: Bootstrap 5 Carousel autoplay

<div id="carouselExampleControls" class="carousel slide" data-mdb-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100" alt="Wild Landscape" />
        </div>
        <div class="carousel-item">
            <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
        </div>
        <div class="carousel-item">
            <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100" alt="Exotic Fruits" />
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleControls" data-mdb-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-mdb-target="#carouselExampleControls" data-mdb-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

How to use?

  1. Download MDB 5 - free UI KIT

  2. Choose your favourite customized component and click on the image

  3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

More examples

Bootstrap Carousel autoplay turned off: Bootstrap 5 Carousel autoplay

More extended Bootstrap documentation