How do I stop a Bootstrap carousel from auto-sliding but keep the navigation controls?
Asked on Oct 25, 2025
Answer
To stop a Bootstrap carousel from auto-sliding while keeping the navigation controls, you need to set the `data-bs-interval` attribute to `false`. This will disable the automatic sliding feature.
<!-- BEGIN COPY / PASTE -->
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
<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 `data-bs-interval="false"` attribute is crucial to stop the auto-sliding.
- Navigation controls are retained with the `carousel-control-prev` and `carousel-control-next` buttons.
- Ensure you have included Bootstrap's CSS and JS files in your project for the carousel to function correctly.
Recommended Links: