How do I mix fade and slide transitions in the Bootstrap carousel?

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

Post this Question & Answer:

How do I mix fade and slide transitions in the Bootstrap carousel?

Asked on Aug 14, 2025

Answer

To mix fade and slide transitions in a Bootstrap carousel, you need to customize the CSS and JavaScript to achieve the desired effect. Here's a simple way to implement both transitions.

<!-- BEGIN COPY / PASTE -->
        <style>
            .carousel-item {
                transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
                opacity: 0;
            }
            .carousel-item.active {
                opacity: 1;
            }
        </style>

        <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
            <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 CSS modifies the `.carousel-item` to include both opacity and transform transitions.
The `active` class is used to control the visibility of the current slide.
Ensure images or content inside `.carousel-item` are properly sized for a smooth transition.
You can adjust the transition duration by changing the `0.5s` value in the CSS.

✅ Answered with Bootstrap 5 best practices.

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

How do I mix fade and slide transitions in the Bootstrap carousel?

Asked on Aug 14, 2025

Answer

The Q&A Network