Salesforce Lightning Image Slider

02:00 11 Comments A+ a-

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.
Controller
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='+doc.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

<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


Thanks
Himanshu Tak






11 comments

Write comments
raj
AUTHOR
19 September 2015 at 04:37 delete

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

Reply
avatar
Anonymous
AUTHOR
19 September 2015 at 04:48 delete

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

Reply
avatar
Himanshu Tak
AUTHOR
20 September 2015 at 22:08 delete

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

Reply
avatar
Anonymous
AUTHOR
20 September 2015 at 22:13 delete

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

Reply
avatar
Unknown
AUTHOR
21 September 2015 at 03:27 delete

Nice component with latest salesforce technology ...

Reply
avatar
Unknown
AUTHOR
8 October 2015 at 23:22 delete

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

Reply
avatar
Unknown
AUTHOR
27 July 2016 at 12:13 delete

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!!

Reply
avatar
rohit kandul
AUTHOR
27 December 2016 at 04:28 delete

I am getting the below error
Uncaught TypeError: Cannot read property 'apply' of undefined
throws at https://miracleworkers2016-dev-ed.lightning.force.com/auraFW/javascript/0aX-jfAXPggJFRoObqLaSQ/aura_prod.js:513:85

Reply
avatar
3 March 2017 at 09:25 delete

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

Reply
avatar
mkuma
AUTHOR
17 July 2017 at 22:13 delete

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

Reply
avatar