描述
Prerequisites
- I have searched for duplicate or closed feature requests
- I have read the contributing guidelines
Proposal
The bootstrap carousel docs mention the initialisation of and obtaining of a reference to the carousel. The carousel reference will be null unless the images have loaded (I cannot be certain of whether this is the first image or all images as I am dynamically loading images). It took me a while to figure out that any code that refers to the carousel reference such as:
var myCarouselEl = document.querySelector('#carousel-large-background');
const carousel = bootstrap.Carousel.getInstance(myCarouselEl);
will return an uninitialised carousel unless the images have loaded. The solution is to put code relating to the carousel inside a $(window).on('load', function() { and not a $(document).ready(.
I am needing to pause the carousel inside a slid or slide event, and not understanding the above left me struggling for a while as I figured out the cause. Judging by forum posts it seems like I am not the only person experiencing the issue.
In the docs at https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.1/components/carousel.md#via-javascript
place a sentence to that effect, perhaps after the code box and before the next section heading ...
to obtain a valid reference to the carousel, make sure that it has loaded by placing code inside a $(window).on("load", function()} rather than a $(document).ready(function()}
It would also be a good idea to instruct developers that one cannot pause a carousel inside a 'slide' event, only in a 'slid' event.
Motivation and context
This change will help developers to understand how to use the carousel without wasting time searching for an appropriate solution.