lightning:carousel example
In this blog, I am going to explain how to use lightning: carousel example. Here I am using to display the user chatter profile image to display as the carousel.A lightning: carousel component displays a series of images in a single container. This example creates a basic carousel with three images. Auto-scrolling is enabled by default, and every image stays active for 5 seconds before moving on to the next one.
Apex Class
|
1 2 3 4 5 6 7 |
public class UserProfileController { @AuraEnabled public static List<User> getUserProfiles(){ return [Select Id,Address ,BannerPhotoUrl,CompanyName,Department,Email,FirstName , LastName ,FullPhotoUrl from User]; } } |
Lightning Component
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<aura:component controller="UserProfileController"> <aura:attribute name="users" type="List" /> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <lightning:carousel > <aura:iteration items="{!v.users}" var="user"> <lightning:carouselImage src = "{!user.FullPhotoUrl}" header = "{!user.FirstName}" description = "{!user.AboutMe}" alternativeText = "{!user.LastName}"></lightning:carouselImage> </aura:iteration> </lightning:carousel> </aura:component> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
({ doInit : function(component, event, helper) { var action = component.get("c.getUserProfiles"); action.setCallback(this, function(response){ var state = response.getState(); if (component.isValid() && state === "SUCCESS") { var retrunRes = response.getReturnValue(); component.set("v.users" ,retrunRes ); } }); $A.enqueueAction(action); } }) |
Simple App for testing
|
1 2 3 |
<aura:application extends="force:slds"> <c:CarouselExample /> </aura:application> |
