Site icon WedgeCommerce

lightning:carousel In Lightning Component

Snehil Jaiswal

In this blog we are going to learn about lightning:carousel (a lightning component). This component is used to display the collection of image. This component show only one image at a time. You can also define whether the next image will auto-scroll. To display the next image or another image in carousel you can use indicator also. We use lightning:carouselImage lightning component to display the image. Let’s start with these component’s attribute.

Attribute

–> lightning:carouselImage

1). src : This attribute stores the path of the image.
2). header : This display the heading of the image element in h2 tag.
3). description : Use this attribute to give some description of the element.
4). alternativeText : When image is not loaded what text should be displayed.

–> lightning:carousel

1). class : Use this attribute to define css on outer element.
2). disableAutoRefresh : To control the looping of the carousel after last item is displayed. Default value is false.
3). disableAutoScroll : To control the auto-scrolling of the carousel. Default is false.
4). scrollDuration : Its effect can be seen when disableAutoScroll is set to false. It define the time interval between two items. Default is 5sec.
5). title : To display the tooltip text.

Example

Let’s see an example. In this example we will use static resource to display the image. Here are the steps :
1). Create a static resource which contains a zip folder of the image.

Note : name of static resource and folder containing images can be anything.

2). Now create lightning component by using following code.

<aura:component >
    <!-- /**
           * Webkul Software.
           *
           * @category Webkul
           * @author Webkul
           * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
           * @license https://store.webkul.com/license.html
           */
   -->
   <lightning:carousel disableAutoScroll="false" disableAutoRefresh="false" scrollDuration = "3">
     <lightning:carouselImage src="{!$Resource.wedgeImg+'/BannerImages/banner-camera.png'}"
                              header="Camera"
                              description="This is a camera."
                              alternativeText="Reload Image"></lightning:carouselImage>
     <lightning:carouselImage src="{!$Resource.wedgeImg+'/BannerImages/banner-desktop.png'}"
                              header="Desktop"
                              description="This is desktop"
                              alternativeText="Reload Image">
     </lightning:carouselImage>
     <lightning:carouselImage src="{!$Resource.wedgeImg+'/BannerImages/banner-washing-machine.png'}"
                              header="Washing Machine"
                              description="Here is washing machine"
                              alternativeText="Cann't load this image.">
     </lightning:carouselImage>
  </lightning:carousel>
</aura:component>

Note : In above example use “{!$Resource.staticResourceName+’path_to_image/pic1.png’}” format to display the image from static resource.

Output :

Support

That’s all for lightning:carousel in lightning component , still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to contact us, we will be happy to help you https://wedgecommerce.com/contact-us/.

Exit mobile version