Carousel

A slideshow component for cycling through elements—images or slides of text—like

a carousel.

How it works
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 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.

Lastly, if you’re building our JavaScript from source, it requires util.js.

Example
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.
With controls

Adding in the previous and next controls:

With indicators

You can also add the indicators to the carousel, alongside the controls, too.
With captions

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. We hide them initially with .d-none and bring them
back on medium-sized devices with .d-md-block.

Usage
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.

The data-ride="carousel" attribute is used to mark a carousel as animating starting

at page load. It cannot be used in combination with (redundant and
unnecessary) explicit JavaScript initialization of the same carousel.

Via JavaScript

Call carousel manually with: