Improve docs relating to carousel

Created by: millerthegorilla

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.