Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App
Use lightning:carouselImage components to specify images to display in the lightning:carousel component. You can specify up to six images. The images are displayed in the order you list them in the lightning:carousel component.
For each image, use the src attribute to specify the path to the image. Optionally use header and description attributes to provide a header and descriptive text that the carousel displays below the image. You can also hyperlink the images with the href attribute.
Use the alternativeText attribute to provide assistive text for each image.
This component implements styling from carousel in the Lightning Design System.
This example creates a basic carousel with three images.
1<aura:component>2 <lightning:carousel>3 <lightning:carouselImage4 src="path/to/carousel-01.jpg"5 header="First card"6 description="First card description"7 alternativeText="This is a card"8 >9 </lightning:carouselImage>10 <lightning:carouselImage11 src="path/to/carousel-02.jpg"12 header="Second card"13 description="Second card description"14 alternativeText="This is a card"15 >16 </lightning:carouselImage>17 <lightning:carouselImage18 src="path/to/carousel-03.jpg"19 header="Third card"20 description="Third card description"21 alternativeText="This is a card"22 >23 </lightning:carouselImage>24 </lightning:carousel>25</aura:component>
Using Images in Your Org
To use images in your org, upload them as static resources in the Static Resources page in Setup. To reference a resource in lightning:carouselImage, use {!$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.
This example uses static resources uploaded as a single image, and images uploaded in a zip file.
1<aura:component>2 <lightning:carousel>3 <lightning:carouselImage4 src="{!$Resource.company_logo}"5 header="Company logo"6 description="Company logo uploaded as a static resource"7 alternativeText="Company logo"8 >9 </lightning:carouselImage>10 <lightning:carouselImage11 src="{!$Resource.company_products + '/product1.png'}"12 header="Fantastic product 1"13 description="Fantastic product image in a zip file"14 alternativeText="Fantastic product 1"15 >16 </lightning:carouselImage>17 <lightning:carouselImage18 src="{!$Resource.company_products + '/product2.png'}"19 header="Fantastic product 2"20 description="Fantastic product image in a zip file"21 alternativeText="Fantastic product 2"22 >23 </lightning:carouselImage>24 </lightning:carousel>25</aura:component>
Accessibility
Use the alternativeText attribute to specify assistive text for each image.
Attributes
Name
Description
Type
Default
Required
alternativeText
Assistive text for the image.
String
body
The body of the component. In markup, this is everything in the body of the tag.
Aura.Component[]
class
A CSS class for the outer element, in addition to the component's base classes.
String
description
Text displayed under the header.
String
header
Text for the label that's displayed under the image.
String
href
A URL to create a link for the image. Clicking the image opens the link in the same frame.
String
src
The path to the image.
String
title
Displays tooltip text when the mouse moves over the element.
