Carousel

A lightning-carousel component shows 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 a 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 shows the first six and ignores the rest.

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

The carousel shows 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 is visible for 5 seconds before the carousel scrolls to the next image. The control button enables you to pause and restart the automatic scrolling.

lightning-carousel implements the carousel blueprint in the Salesforce Lightning Design System (SLDS). The carousel adapts to SLDS 1 or SLDS 2 styling based on the org’s theme or the container app that you use.

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 is visible for by using the scroll-duration attribute.

For example, you can create three images for the carousel and disable automatic scrolling.

1<template>
2    <lightning-carousel disable-auto-scroll>
3        <lightning-carousel-image
4            src="path/to/carousel-01.jpg"
5            header="First card"
6            description="First card description"
7            alternative-text="This is a card"
8            href="https://www.example.com"
9        >
10        </lightning-carousel-image>
11        <lightning-carousel-image
12            src="path/to/carousel-02.jpg"
13            header="Second card"
14            description="Second card description"
15            alternative-text="This is a card"
16            href="https://www.example.com"
17        >
18        </lightning-carousel-image>
19        <lightning-carousel-image
20            src="path/to/carousel-03.jpg"
21            header="Third card"
22            description="Third card description"
23            alternative-text="This is a card"
24            href="https://www.example.com"
25        >
26        </lightning-carousel-image>
27    </lightning-carousel>
28</template>

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

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.