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:carouselImage components are supported.

Use lightning:carouselImage 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 disableAutoScroll="true" attribute in the lightning:carousel tag. The user must then use the indicator buttons to display each image in the carousel.

Disable continuous looping by setting the disableAutoRefresh="true" attribute. The images scroll one time through and stop at the last image if you set disableAutoRefresh="true" but not disableAutoScroll="true".

Change the number of seconds each image displays using the scrollDuration 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.

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

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.