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.
<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.
Follow the steps below to install the component in your own org:
Step 1: Install the Application
Enable Lightning Components in your new Developer Org: In Setup, click Develop > Lightning Components, check the Enable Lightning Components checkbox, and click Save.
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.
In Salesforce’s Setup Mode, select Administer > Data Management > Data Import Wizard
Click Launch Wizard
Select Accounts and Contacts
Click Add New Records
Drag candidates.csv to the upload area
Click Next, Next, and Start Import
Step 3: Add the Candidates Component to the Salesforce1 Menu
Re-enable Lightning Components in your new Developer Org: In Setup, click Develop > Lightning Components, check the Enable Lightning Components checkbox, and click Save.
In Setup, select Administer > Mobile Administration > Mobile Navigation
Select Candidates in the Available list
Click the Add button to add the Candidates tab to the Selected list
Click the Up button to move the Candidates tab closer to the top of the menu
Step 4: Test the Component in the Salesforce1 Application
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
This starts the Salesforce1 Application simulator
Click the menu button in the upper left corner
Select Candidates in the menu
Swipe left and right to navigate through the list of candidates
Click the candidate’s name to view the candidate’s standard details page
Click the Back button to go back to the carousel
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.