Carousel In Lightning Component
Biswajeet
February 26, 2018 1 Comment on 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>