Tag Archives: Lightning Carousel

Carousel In Lightning Component

lightning:carousel component displays a series of images in a single container. Only one image is displayed at a time, and we can select other images by clicking the carousel indicators. We use lightning:carouselImage lightning component to display the image.

Example:
In below example I used static resource to display the images.
Here is the format “{!$Resource.staticResourceName+’image_path/img1.png’}” to display the image from static resource.

<!--Sample.cmp--> 
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    <!--Component Start--> 
    <div class="slds-m-around--xx-large">
        <lightning:carousel disableAutoRefresh="true">
            <lightning:carouselImage
                                     src="{!$Resource.CarouselImages+'/CarouselImages/1.png'}"
                                     header = "First Card"
                                     description = "First Image"
                                     alternativeText = "First Image Description."
                                     href = "https://www.google.com">
            </lightning:carouselImage>
            <lightning:carouselImage
                                     src="{!$Resource.CarouselImages+'/CarouselImages/2.png'}"
                                     header = "Second Card"
                                     description = "Second Image"
                                     alternativeText = "Second Image Description"
                                     href = "https://www.google.com">
            </lightning:carouselImage>
            <lightning:carouselImage
                                     src="{!$Resource.CarouselImages+'/CarouselImages/3.png'}"
                                     header = "Third Card"
                                     description = "Third Image"
                                     alternativeText = "Third Image Description."
                                     href = "https://www.google.com">
            </lightning:carouselImage>
        </lightning:carousel>
    </div>
    <!--Component End-->
</aura:component>

Output: