function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Luke Vang 33Luke Vang 33 

Lightning Component Carousel

Hey,

Anyone notifce the lightning carousel posted here:

https://developer.salesforce.com/blogs/developer-relations/2015/06/creating-carousel-lightning-component.html

Does not work anymore? Is it just me or does the swipe action not funcation at all? Anyone have any idea why the swiping functionality stopped working? I'm looking to implement a carousel for a project with the lightning design system.

Thanks,
prithvi kumarprithvi kumar
<aura:component controller="displayImage" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
   <ltng:require styles="/resource/Slider/Slider/bootstrap.min.css"/>    
    <ltng:require scripts="/resource/Slider/Slider/jquery.min.js,
                           /resource/Slider/Slider/bootstrap.min.js"
   afterScriptsLoaded="{!c.myAction}"/>    
    
         <aura:handler name="init" action="{!c.myAction}" value="{!this}" />  
        <aura:attribute name="atlist" type="ImagesSlider__c"/>
        <aura:attribute name="recordId" type="Id"  />
        <aura:attribute name="recordIds" type="Id[]"  />
           <aura:attribute name="imagesUrl" type="String[]" />
        <aura:attribute name="interval" type="Integer" default="2000"/>   

    <div id="carousel-example-generic" class="carousel slide imageInterval" data-ride="carousel" >
       <aura:iteration items="{!v.atlist}" var="acc">    
        <ol class="carousel-indicators">
            <aura:iteration items="{!acc.Imagess__r}" 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>
         </aura:iteration>
        
        <div class="carousel-inner" role="listbox">  
             <aura:iteration items="{!v.atlist}" var="acc">    
            <aura:iteration items="{!acc.Imagess__r}" var="imgUrl" indexVar="index">   
                <aura:if isTrue="{!index == 0}">
                    <div class="item active" >
                        <ui:outputRichText value="{!imgUrl.UploadImage__c}" class="img-responsive"/>
                        <div class="carousel-caption"> </div>
                    </div>
                    <aura:set attribute="else" >
                        <div class="item " >
                            <ui:outputRichText value="{!imgUrl.UploadImage__c}"  class="img-responsive"/>
                            <div class="carousel-caption"> </div>
                        </div>
                    </aura:set>
                </aura:if>
                
            </aura:iteration>
                 </aura:iteration>
        </div>
    
        <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>