-
-
Notifications
You must be signed in to change notification settings - Fork 78.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve docs relating to carousel #35722
Comments
I would love to help with this |
Hello! I would love to contribute to this as it's still open. Please let me know. |
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. |
Hello @julien-deramond - I did not have write access. So, had to fork the repo. Submitted a PR #37062, Could you please review? Thanks! |
Hi @julien-deramond! Looks like no development has been made in this issue after the PR was closed. |
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.
The text was updated successfully, but these errors were encountered: