How can I set different intervals per slide in the carousel?

Asked on Aug 27, 2025

1 Answer

To set different intervals for each slide in a Bootstrap 5 carousel, you can use data attributes to specify the interval for each individual slide. This allows you to customize the timing for each slide transition.

<!-- BEGIN COPY / PASTE -->
        <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active" data-bs-interval="2000">
                    <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
                </div>
                <div class="carousel-item" data-bs-interval="4000">
                    <img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
                </div>
                <div class="carousel-item" data-bs-interval="6000">
                    <img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-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-bs-target="#carouselExample" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Each `
` can have a `data-bs-interval` attribute to specify the interval in milliseconds.
The `active` class should be applied to the first slide to make it visible initially.
Ensure that the carousel ID (`#carouselExample`) is consistent across controls and the carousel itself.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions