11 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!26437merge,!22391V4 dev,!22547Finished a new translation for bootstrap,!22143Fix selectable disabled toggle radio buttons,!22598test,!25326Adjust examples,!23995Add back cursor: pointer for .btn-link,!23178Spinner,!17021v4
@@ -5,7 +5,11 @@ description: A slideshow component for cycling through elements—images or slid
group:components
---
A slideshow component for cycling through elements—images or slides of text—like a carousel. 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.**
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
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.).
Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
## Contents
...
...
@@ -14,32 +18,86 @@ A slideshow component for cycling through elements—images or slides of text—
## Example
When building carousels, be sure your slides are the same size as one another. The carousel doesn't automatically crop images to the same dimensions for you across slides.
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.
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
Here's a carousel with slides only. Note the presence of the `.d-block` and `.img-fluid` on carousel images to prevent browser default image alignment.
@@ -57,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`.
@@ -105,25 +163,15 @@ Add captions to your slides easily with the `.carousel-caption` element within a
{% highlight html %}
<divclass="carousel-item">
<imgsrc="..."alt="...">
<divclass="carousel-caption">
<divclass="carousel-caption d-none d-md-block">
<h3>...</h3>
<p>...</p>
</div>
</div>
{% endhighlight %}
{% callout danger %}
#### Accessibility issue
The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
{% endcallout %}
## Usage
### Multiple carousels
Carousels require the use of an `id` on the outermost container (the `.carousel`) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's `id`, be sure to update the relevant controls.
### Via data attributes
Use data attributes to easily control the position of the carousel. `data-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel `data-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`.
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><aclass="btn btn-lg btn-primary"href="#"role="button">Sign up today</a></p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -183,7 +183,14 @@ Dropped entirely for the new card component.
### Carousel
- Renamed `.item` to `.carousel-item`.
- Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.
- All CSS has been un-nested and renamed, ensuring each class is prefixed with `.carousel-`.
- For carousel items, `.next`, `.prev`, `.left`, and `.right` are now `.carousel-item-next`, `.carousel-item-prev`, `.carousel-item-left`, and `.carousel-item-right`.
-`.item` is also now `.carousel-item`.
- For prev/next controls, `.carousel-control.right` and `.carousel-control.left` are now `.carousel-control-right` and `.carousel-control-left`, meaning they no longer require a specific base class.
- Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.
- Removed image overrides for images in carousel items, deferring to utilities.
- Tweaked the Carousel example to include the new markup and styles.
