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

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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

Asked on Aug 13, 2025

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.

Ask any question about Bootstrap here... and get an instant response.

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

Asked on Aug 13, 2025

Answer

The Q&A Network