Prerequisites
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.
Prerequisites
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:
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.