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

 

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