Skip to content
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

Open
2 tasks done
millerthegorilla opened this issue Jan 25, 2022 · 5 comments
Open
2 tasks done

Improve docs relating to carousel #35722

millerthegorilla opened this issue Jan 25, 2022 · 5 comments
Labels
docs help wanted p4 Low priority, nice to have v5

Comments

@millerthegorilla
Copy link

millerthegorilla commented Jan 25, 2022

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.

@Emeka-Ugbanu-hub
Copy link

I would love to help with this

@mdo mdo added docs help wanted v5 p4 Low priority, nice to have and removed feature labels Apr 12, 2022
@sdkdeepa
Copy link

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

@julien-deramond
Copy link
Member

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 added a commit to sdkdeepa/bootstrap that referenced this issue Aug 31, 2022
@sdkdeepa
Copy link

sdkdeepa commented Aug 31, 2022

Hello @julien-deramond - I did not have write access. So, had to fork the repo. Submitted a PR #37062, Could you please review? Thanks!

@mehul-srivastava
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs help wanted p4 Low priority, nice to have v5
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants