How do I mix fade and slide transitions in the Bootstrap carousel?
Asked on Aug 26, 2025
1 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:
✅ Answered with Bootstrap 5 best practices.- 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.