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:

1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5.00 out of 5)
Loading...

About Biswajeet

Biswajeet is my Name, Success is my Aim and Challenge is my Game. Risk & Riding is my Passion and Hard Work is my Occupation. Love is my Friend, Perfection is my Habit and Smartness is my Style. Smiling is my Hobby, Politeness is my Policy and Confidence is my Power.

  • Prashanth R

    Hi ,

    We have limitations of only 6 how to overcome this issue