Lightning Component – Image Slider

Share on facebook
Share on twitter
Share on linkedin
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.

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.

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Mobile Responsive Testing

Mobile Responsive Testing is simply a Testing Process performed to make sure that your website or an app is working appropriately on all types of devices.
Whether it an app or website, they need to ensure that they are accessible from any device, anytime, anywhere.

Read Article »

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.