'Bootstrap 5.1.9 carousel pause method non-functional
I am using Bootstrap 5.1.9 in my Angular project to show a carousel. I wish the user to be able to pause the carousel using a button.
To this end, with modern Bootstrap (and Angular 12) the documentation states I can do the following to get an instance of the carousel I can work with:
import { Carousel } from 'bootstrap'
@ViewChild('basic', { static: false }) public DOMcarousel: ElementRef | undefined;
pauseButton() {
this.carousel = Carousel.getOrCreateInstance(this.DOMcarousel?.nativeElement);
}
The middle line is Angular specific, to get a reference to the DOM carousel element.
The above will get an instance of the existing carousel which exists on the DOM and should allow methods to be used on it, for example:
this.carousel.next()
this.carousel.prev()
this.carousel.to(<slideID>)
All of the above work correctly, the carousel will move forwards and backwards, or visit a given ID correctly, in fact, all of the methods in the documentation here work, except the one I want to use:
this.carousel.pause()
This does nothing at all, and the carousel continues to cycle. Could anybody who uses Angular confirm this for Bootstrap 5.1.9, or does anybody have any idea why the pause method doesn't work before I consider opening a bug?
For completeness, a simple HTML carousel containing the Angular reference 'basic' which I use for testing on looks as follows:
<div #basic id="carouselExampleSlidesOnly" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.freeimages.com/images/small-previews/aaf/abstract-paper-free-photo-1175904.jpg"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.freeimages.com/images/small-previews/107/green-leaves-1410259.jpg"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.freeimages.com/images/small-previews/344/rainbow-5-1309523.jpg"
class="d-block w-100" alt="...">
</div>
</div>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
