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

public class UserProfileController {

    @AuraEnabled 
    public static List<User> getUserProfiles(){
        return [Select Id,Address ,BannerPhotoUrl,CompanyName,Department,Email,FirstName , LastName ,FullPhotoUrl from User];
    }
}

Lightning Component 

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

({
    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

<aura:application extends="force:slds">
    <c:CarouselExample />
</aura:application>