How do I stop a Bootstrap carousel from auto-sliding without using JavaScript?
Asked on Oct 26, 2025
Answer
To stop a Bootstrap carousel from auto-sliding without using JavaScript, you can set the `data-bs-interval` attribute to "false". This will prevent the carousel from automatically cycling through the slides.
<!-- BEGIN COPY / PASTE -->
<div id="myCarousel" 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="#myCarousel" 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="#myCarousel" 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 stops the carousel from auto-sliding.
- Ensure that the `data-bs-ride="carousel"` attribute is included to initialize the carousel.
- Use the navigation controls to manually change slides.
- This method requires no JavaScript and relies purely on HTML attributes.
Recommended Links: