Saturday, 19 September 2015

Salesforce Lightning Image Slider

Hi All,
I have created a simple Image Slider which is used as Lightning Component. It is very easy to drag and drop on App Builder. You can configure two things "Slider Image Folder" where you can specify the document folder name where your images are stored. And second configuration is the Interval of speed of the sliding.
More Information With Demo Visit :- Click here
Unable to display content. Adobe Flash is required.
Here is the sample code of the component.
public class SliderController{ @AuraEnabled public static List<String> getImages(String folderName){ List<String> lstOfImagesUrl =new List<String>(); List<Folder> folderLst= [select id from Folder where name=:folderName]; List<Document> docList=[select id from Document where FolderId=:folderLst[0].id]; for(Document doc:docList){ lstOfImagesUrl.add(System.URL.getSalesforceBaseUrl().toExternalForm().replace('https','http')+'/servlet/servlet.ImageServer?id=''&oid='+UserInfo.getOrganizationId()); } return lstOfImagesUrl ; } }
Aura Controller

({ doInt: function(component, event, helper) { var speed=component.get("v.interval"); var document=component.get("c.getImages"); document.setParams({ folderName :component.get("v.Folder") }); document.setCallback(this, function(response){ if(component.isValid() && response.getState() === "SUCCESS"){ component.set("v.imagesUrl", response.getReturnValue()); } }); $A.enqueueAction(document); if(speed<500){ alert("Min Interval 500 Millisecond"); }else{ $('.carousel').carousel({ interval: speed }); $('.carousel').carousel({ interval: true }); } }, Previous : function(component, event, helper) { $('#carousel-example-generic').carousel('prev'); }, Next : function(component, event, helper) { $('#carousel-example-generic').carousel('next'); $('#carousel-example-generic').carousel(200); }, })
Aura component

<aura:component controller="SliderController" implements="flexipage:availableForAllPageTypes"> <ltng:require styles="/resource/BootstrapFiles/BootstrapFiles/css/bootstrap.min.css"/> <ltng:require scripts="/resource/BootstrapFiles/BootstrapFiles/js/jquery.min.js, /resource/BootstrapFiles/BootstrapFiles/js/bootstrap.min.js" afterScriptsLoaded="{!c.doInt}"/> <aura:attribute name="imagesUrl" type="String[]" /> <aura:attribute name="Folder" type="String" default="SliderImages"/> <aura:attribute name="interval" type="Integer" default="2000"/> <div id="carousel-example-generic" class="carousel slide imageInterval" data-ride="carousel" > <!-- Indicators --> <ol class="carousel-indicators"> <aura:iteration items="{!v.imagesUrl}" var="imgUrl" indexVar="index"> <aura:if isTrue="{!index == 0}"> <li data-target="#carousel-example-generic" data-slide-to="{!index}" class="active"></li> <aura:set attribute="else"> <li data-target="#carousel-example-generic" data-slide-to="{!index}" ></li> </aura:set> </aura:if> </aura:iteration> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <aura:iteration items="{!v.imagesUrl}" var="imgUrl" indexVar="index"> <aura:if isTrue="{!index == 0}"> <div class="item active" > <img src="{!imgUrl}" alt="..." class="img-responsive" style="width:100% !important"/> <div class="carousel-caption"> </div> </div> <aura:set attribute="else" > <div class="item " > <img src="{!imgUrl}" alt="..." class="img-responsive" style="width:100% !important"/> <div class="carousel-caption"> </div> </div> </aura:set> </aura:if> </aura:iteration> </div> <!-- Controls --> <a class="left carousel-control" href="" role="button" data-slide="prev" onclick="{!c.Previous}"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="" role="button" data-slide="next" onclick="{!c.Next}"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </aura:component>

<aura:application > <div class="container-fluid" style="background-color:white !important" > <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <c:Slider /> </div> <div class="col-sm-3"></div> </div> </div> </aura:application>
Slider Design 

<design:component> <design:attribute name="Folder" label="Slider Images Folder" /> <design:attribute name="interval" label="Interval" /> </design:component>

Give this code a try and let me know if you face issues in set it up. Provide your valuable feedback

Himanshu Tak


  1. It is nice component. is it possible to control height and width?

    1. Hi Raj it a nice Question
      in this component use bootstrap so height and width auto set screen size
      Like Mobile,PC,tablet etc .

  2. It is nice slider.Great himanshu keep it up.:)

  3. It's awesome. I can see many uses of this in lightning thanks for this post.

  4. Nice component with latest salesforce technology ...

  5. Is there something I would need to add to this code to make it work with my developer org - it has a custom namespace

  6. Hi Himanshu, can you please help me to know the static resource which you have used in your component from where can I download that. Many thanks in advance!!

  7. I am getting the below error
    Uncaught TypeError: Cannot read property 'apply' of undefined
    throws at

  8. Its a nice slider, but bootstrap messes up the whole lightning home page CSS, and using a normalized CSS breaks the slider for some reason. If you could test that @himanshu

  9. May i know how we can create a folder in salesforce.