A lightning:carousel component displays a series of images in a single container. Only one image is displayed at a time, and you can select other images by clicking the carousel indicators. The carousel auto scrolls by default, and auto scrolling can be disabled by setting disableAutoScroll="true".
This component inherits styling from carousel in the Lightning Design System.
To implement additional styling for this component, use the Lightning Design System helper classes.
This example creates a basic carousel with three images.
<aura:component> <lightning:carousel> <lightning:carouselImage src = "path/to/carousel-01.jpg" header = "First card" description = "First card description" alternativeText = "This is a card"></lightning:carouselImage> <lightning:carouselImage src = "path/to/carousel-02.jpg" header = "Second card" description = "Second card description" alternativeText = "This is a card"> </lightning:carouselImage> <lightning:carouselImage src = "path/to/carousel-03.jpg" header = "Third card" description = "Third card description" alternativeText = "This is a card"> </lightning:carouselImage> </lightning:carousel> </aura:component>
The first image in the lightning:carousel is displayed by default. To use an image in your org, upload it as a static resource in the Static Resources setup page. Use the {!$Resource.image}" syntax in your src attribute, where image is the name you provided in the Name field on the setup page. If the image path is invalid or the image does not load because the user is offline or another reason, the description and alternative text are shown in place of the image.
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
disableAutoRefresh | Boolean | Specifies whether the carousel should stop looping from the beginning after the last item is displayed. The default value is false. | |
disableAutoScroll | Boolean | Specifies whether auto scroll is disabled. The default value is false. | |
scrollDuration | Integer | The auto scroll duration. The default is 5 seconds, after that the next image is displayed. | |
title | String | Displays tooltip text when the mouse moves over the element. |