I'm struggling to stop a Bootstrap 5 carousel with a button click.
The pause function seems to be ineffective.
You can view the code on Code Pen Example or see the code below.
document.getElementById("btnPause").addEventListener("click", function () {
var carouselElement = document.getElementById("carouselAnimals");
var carousel = new bootstrap.Carousel(carouselElement);
carousel.pause(); // getting called, but not pausing
// carousel('pause'); // doesn't work
// carousel.carousel('pause'); // no effect
});
<div class='container'>
<div class="container">
<div class="row">
<div class="col-3">
<button id='btnPause' class="btn btn-secondary">Stop carousel</button>
</div>
<div class="col">
<div id="carouselAnimals" class="carousel slide" data-bs-ride="carousel" data-bs-interval='1000' data-interval='100' >
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://placekitten.com/800/500" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://loremflickr.com/800/500" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://placeimg.com/800/500/animals" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
</div>
</div>