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.