Carousel

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

Carousel in Pattern Lab

Please note that clicking carousel control arrows skips page down to that element due to the Pattern Lab iFrame. To see the Carousel outside of the iFrame, either click the gear icon at the top right of the page and select "Open in New Window" or right-click the control and select "open in new tab."

Slides Only

Here’s a carousel with slides only. The .active class must be on at least one item initially to show.

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.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.