Improve docs relating to carousel

[millerthegorilla]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] 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.

[Emeka-Ugbanu-hub]

I would love to help with this

[sdkdeepa]

Hello! I would love to contribute to this as it's still open. Please let me know.

[julien-deramond]

Hello @sdkdeepa you can contribute to this by creating a PR. Please read through our contributing guidelines. Included are directions for coding standards, and notes on development.

[sdkdeepa]

Hello @julien-deramond - I did not have write access. So, had to fork the repo. Submitted a PR https://github.com/twbs/bootstrap/pull/37062, Could you please review? Thanks!

[mehul-srivastava]

Hi @julien-deramond! Looks like no development has been made in this issue after the PR was closed. I have a submitted a PR #38619, could you please review it? Thanks!