Carousel

A lightning-carousel component displays a series of images in a single container, with image indicators and a control button below the image panel. Only images passed in lightning-carousel-image components are supported.

Use lightning-carousel-image components nested in lightning-carousel to specify up to six images. For each image, optionally provide header and descriptive text that the carousel displays below the image. You can also hyperlink the images.

If you specify more than six images, the carousel displays the first six and ignores the rest.

The images are displayed in the order you list them in the lightning-carousel component.

The carousel displays one image at a time, and you can select particular images by clicking the indicators. The carousel can display up to six indicators only. On mobile devices, you can also swipe an image to scroll to the next image.

By default, the carousel auto scrolls and loops through the images repeatedly. Each image displays for 5 seconds before the carousel scrolls to the next image. The control button enables you to pause and restart the automatic scrolling.

Disable auto scrolling and remove the control button by including the disable-auto-scroll attribute in the lightning-carousel tag. The user must then use the indicator buttons to display each image.

Disable continuous looping by including the disable-auto-refresh attribute. The images scroll one time through and stop at the last image if you include disable-auto-refresh but not disable-auto-scroll.

Change the number of seconds each image displays using the scroll-duration attribute.

This component implements styling from carousel in the Lightning Design System.

To implement additional styling for the lightning-carousel component, use the Lightning Design System utility classes.

This example creates a basic carousel with three images and disables automatic scrolling.

lightning-carousel implements the SLDS carousel blueprint, which follows the WAI-ARIA Authoring Practices Guide for the carousel pattern. Use the Tab key to move focus to the carousel, then tab again to focus on the indicator buttons. Use right and left arrow keys to scroll to the next or previous image.

lightning-carousel observes these roles, states, and properties.

• The indicator buttons use a ul element with role="tablist".
• Each indicator button uses an li element with role="presentation".
• Each list item wraps an anchor tag with role="tab".
• Each anchor tag has aria-selected="false" when it's not selected.