lightning:carousel (Beta)

A collection of images that are displayed one at a time.

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>
Usage Considerations

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.

Attributes

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.