Super Slider Lightning Component

Before we proceed with the configuration, we just need to create a record in Custom Carousels to keep a collection of the images and youtube videos which would be inserted on the HomePage or any other record page.

Follow the Steps below to create a new record in Custom Carousels as shown below:

Step 1: Click on App Launcher Icon.

Step 2: Click on Custom Carousels tab as shown below:Step 3: Click on New.

Step 4: Now, enter the name of the Custom Carousel as per your choice, say, Test. Click on Save.

Step 5: Now pick an external image and copy its image address as shown below:

Step 6: Click on the new Custom Carousel created and then click on New.

Step 7: In the Slider Url section, paste the external image URL as shown below:

The Custom Carousel is created now which contains the images. You can add multiple images’ address in the same way to create a slide show of the images.

In the Slider Url Section, you can also insert Youtube Video URL in a specific format as shown below:

E.g A youtube video URL in the format https://www.youtube.com/watch?v=zcD4bJkmLTo
should be entered as https://www.youtube.com/embed/zcD4bJkmLTo
You have to replace the part watch?v= with embed to make it appear in the Slider frame.

Step 8 : In the Display order  Section , Enter the order of images  & videos as shown below :

Display order section works according to the priority of Images & videos which you be inserted .

Now, in order to view the slide show of these images or videos, make a note of the RecordID of Custom Carousel (Test) you created from the Address bar and follow the steps below:

Click on Home Tab and then Click on Edit Page as shown below:

Add the Super Slider Lightning Component by drag and drop concept as shown below in the screenshot.

You just need to enter the record ID of the Custom Carousel(which you copied from the address bar) i.e Test in the Component ID field .

select wk_slider_comp__Custom_Carousel__c  from the Parent Record Drop Down Menu. Click Save and then click on Activate.

Note: In the Select Parent Record drop-down Menu, it is mandatory to enter wk_slider_comp__Custom_Carousel__c or any object i.e Account, Campaigns etc. to which the images or video belong.

If you want to Auto Scroll of Images & videos then You have to Enable Auto Scroll Slides Option .

You can Insert the Speed of Slider in millisecond. It would set the speed of slider when the Auto Scroll Slides of images and videos was Enabled .

If you want to Disable the Auto scroll of slider .Then you have to select the Indicator type as Prev/Next . It would stop the Auto Scroll of slider and you have to scroll manually to see the Images and videos in slider.

Click on Save and then Activate.

In the next screen that appears, click Next.

Now, click on Activate as shown below.

After activation, HomePage view of Super Slider is shown below:

Similarly, to get this component visible and working on Accounts page, click on Accounts tab and open any Account record as shown below:

Now, Click on Edit Page as shown below.

Add the Super Slider Component by drag and drop concept as shown below in the screenshot.

Once you click on Save and then Activate, please click on Assign as Default as shown below:

Now, please click on Save.

The Super Slider Component would appear on the Accounts record page as shown below.

Similarly, you can have a lightning view of Super Slider component on every other record Page like Contacts, Leads, Contracts etc.

Note : You can add the Super Slider Component to the every record page Which contains the Notes & Attachment.

Click on Contact tab and open any Contact record as shown below:

Now add the Images & videos to the Notes & Attachments of contact record page.

Now Click on edit Page as Shown below :

Add the Super Slider Lightning Component by drag and drop concept as shown below in the screenshot.

Now You don’t need to enter the record Id of Custom Carousel . It would auto pick the record Id . And the Slider would appear at the contact record page .

Click on Save and then Activate.

Click on Save.

Contact record Page view of Super Slider.