Lightning Components: Creating a Carousel Component

Lightning Components comes with a series of ready-to-use components. If the component you are looking for is not available out-of-the-box (or on the AppExchange), you can easily build your own: You can build components from scratch, or you can Lightningify existing third-party components that were not originally built for Lightning. In this article, I’ll share a Lightningified version of the the popular Slick Carousel. In the example used for this article, the carousel provides a more immersive User Experience to browse through a list of candidates as part of a recruiting app.

Check out the end result in this video:

Architecture

The component is implemented as follows:

<aura:component controller="CandidateController" implements="force:appHostable">

    <ltng:require styles="/resource/slick/slick.css,/resource/slick/slick-theme.css"	
        scripts="/resource/jquery,/resource/slick/slick.min.js"
        afterScriptsLoaded="{!c.doInit}"/>
    
	<aura:attribute name="contacts" type="Contact[]"/>

    <div class="carousel">
		<aura:iteration items="{!v.contacts}" var="contact">
            <c:CandidatePage contact="{!contact}"/>
        </aura:iteration>
	</div>
   
</aura:component>

Highlights:

• <ltng:require> is used to load jQuery and the Slick Carousel jQuery plugin (js and css files)
• Even though the carousel was not built natively as a Lightning Component, you are still building and using it “the Lightning way”: using the Lightning iterator, nesting Lightning components (CandidatePage), using Lightning attributes and events, etc.

Installation Instructions

Follow the steps below to install the component in your own org:

Step 1: Install the Application

1. Enable Lightning Components in your new Developer Org: In Setup, click Develop > Lightning Components, check the Enable Lightning Components checkbox, and click Save.
2. Click this link to install the application using an unmanaged package, then click Continue, Next, Next, Install.

Step 2: Import Data

You currently have to disable Lightning Components for the Data Import Wizard to work correctly when importing csv files. To disable Lightning Components: In Setup, click Develop > Lightning Components, uncheck the Enable Lightning Components checkbox, and click Save.

1. Save candidates.csv on your local file system
2. In Salesforce’s Setup Mode, select Administer > Data Management > Data Import Wizard
3. Click Launch Wizard
4. Select Accounts and Contacts
5. Click Add New Records
6. Drag candidates.csv to the upload area
7. Click Next, Next, and Start Import

Step 3: Add the Candidates Component to the Salesforce1 Menu

1. Re-enable Lightning Components in your new Developer Org: In Setup, click Develop > Lightning Components, check the Enable Lightning Components checkbox, and click Save.
2. In Setup, select Administer > Mobile Administration > Mobile Navigation
3. Select Candidates in the Available list
4. Click the Add button to add the Candidates tab to the Selected list
5. Click the Up button to move the Candidates tab closer to the top of the menu
6. Click Save

Step 4: Test the Component in the Salesforce1 Application

1. In Salesforce, remove the part of the URL that comes immediately after salesforce.com and append /one/one.app to the URL immediately after salesforce.com
2. This starts the Salesforce1 Application simulator
3. Click the menu button in the upper left corner
4. Select Candidates in the menu
5. Swipe left and right to navigate through the list of candidates
6. Click the candidate’s name to view the candidate’s standard details page
7. Click the Back button to go back to the carousel

Summary

As a relatively new component framework, Lightning Components may not yet have all the components you are looking for available out-of-the-box. When a specific component is not available, Lightningifying an existing third party component can be a great alternative to building the component from scratch.