How can I pause a carousel on hover and resume on mouse leave?

Asked on Aug 25, 2025

1 Answer

In Bootstrap 5, you can easily pause a carousel on hover and resume it when the mouse leaves by using the `data-bs-pause` attribute. Here's how you can implement it:

<!-- BEGIN COPY / PASTE -->
        <div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-pause="hover">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="image1.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="image2.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="image3.jpg" class="d-block w-100" alt="...">
                </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:

The `data-bs-pause="hover"` attribute ensures the carousel pauses when hovered over.
The carousel will automatically resume when the mouse leaves.
Ensure your images have the correct paths and alt attributes for accessibility.
This example uses Bootstrap's built-in attributes, requiring no additional JavaScript.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions