You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Lightning Component – Image Slider


By: Radha

Introduction: 

This article explains how to build an Image Slider using a Lightning Component. The component is an App Exchange Lightning component and it slides the attached images on any sObject record.

It can be used in the following areas:

1. Lightning App Builder.

2. Visualforce Page.

3. Another Lightning component.

It reads and displays the images from attachments and it supports all types of images. Besides, it automatically slides the images and adjusts auto play duration and slider height.

Attributes: 

1.sliderHeight

Slider height in pixel. The default value is 200 pixels.

2. parentId (required)

Sobject record ID for query the image attachments.

  1. autoplay

Attached images automatically slide.  Default value is TRUE.

  1. duration

It defines the time for switching the next image when the auto-play is set as true. This unit is in milliseconds. Its default value is 3000ms

  1. Lightning App Builder

Step 1: Navigate from Salesforce Classic to Lightning.

Step 2: Create or edit the record page in which you want to place the image slider.

salesforce lightning image slider

Step 3: Drag and drop the image slider component into one of the grid.

Step 4: Set the attribute values for the slider.

salesforce lightning image slider

Step 5: Go to the Record detail page and add the image attachments.

 OUTPUT: 

salesforce lightning image slider

Related List Page:

salesforce lightning image slider

2.Image slider in another Component

Step 1: Go to the Developer Console

Step 2: File -> New -> Lightning application

Step 3: Please add the following code

salesforce lightning image slider

Step 4 : Save and Preview the page.

3.Image slider in a Visualforce page

Step 1: Go to the Developer Console

Step 2: File -> New -> Lightning application [Create a lightning application with the name of sliderApp].

Please add the following code

salesforce lightning image slider

Step 3:File -> New -> VisualForce Page

Please add the following code:

<apex:page standardController="Student__c"  > 

<apex:form > 

 <apex:repeat value="{!Student__c.id}" var="id1"> 

 <Script> 

 Var id;  

 Id="{!id1}"; 

 </script> 

 </apex:repeat> 

 </apex:form> 

<apex:includeLightning /> 

 <div id="sliderHolder"></div>  

 <script>   

  $Lightning.use("c:SliderApp", function() {     

  $Lightning.createComponent("lisl:Slider",  

{ 

           parentId: id, autoplay:false,sliderHeight:100     

                  

              },         "sliderHolder",         function(cmp) {              

                       });     

       });  

 </script>  

      <apex:repeat value="{!Student__c.Attachments}" var="attachment">   

    </apex:repeat> 

</apex:page> 

OUTPUT: 

 

salesforce lightning image slider

 

Conclusion: 

Thus, if we use an image slider on a record page or Visualforce page, then we can easily slide the attached images one by one.