diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 12c638be81..9b16a3729e 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -9,7 +9,7 @@ The carousel is a slideshow for cycling through a series of content, built with In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). -**Nested carousels are not supported.** +Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards. ## Contents @@ -18,9 +18,9 @@ In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibilit ## Example -While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. +Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. -Please be aware the carousel doesn't automatically normalize carousel slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. +Be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. ### Slides only @@ -103,7 +103,6 @@ You can also add the indicators to the carousel, alongside the controls, too. {% endexample %} - {% callout warning %} #### Transition animations not supported in Internet Explorer 9 @@ -116,45 +115,45 @@ Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 does The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible. {% endcallout %} -### Optional captions +### With captions -Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted. +Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{ site.baseurl }}/utilities/display-property/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
-