Ask any question about Bootstrap here... and get an instant response.
How can I customize the duration of carousel slide transitions in Bootstrap 5?
Asked on Nov 21, 2025
Answer
In Bootstrap 5, you can customize the duration of carousel slide transitions by modifying the CSS transition properties. This involves adjusting the `transition` property on the `.carousel-item` class.
<!-- BEGIN COPY / PASTE -->
<style>
.carousel-item {
transition: transform 2s ease-in-out; /* Change 2s to your desired duration */
}
</style>
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<!-- Add more items as needed -->
</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 transition duration is set using the `transition` property on the `.carousel-item` class.
- The example above uses a 2-second transition duration; adjust `2s` to your desired duration.
- Ensure that the CSS is loaded after Bootstrap's CSS to override the default styles.
- This customization affects the slide transition speed but not the interval between slides.
Recommended Links:
