–> 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.

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 :

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/.