Custom Image Slider in Salesforce Using Lightning Web Component

In Salesforce Lightning pages, we can use image sliders to make them more attractive and interactive. An image slider allows us to display images with transitions and add captions.

In Salesforce, we can display image sliders using different methods, such as:

• Using inbuilt lightning-carousel element
• Using an external JS library such as Flickity

In this tutorial, I will show you how to create an image slider in Salesforce using the above two methods with examples.

Custom Image Slider in Salesforce Using Lightning Web Component

An image slider in Salesforce is a Lightning component that displays an image slideshow. It can be deployed on the Lightning record page, home page, and community page. The displayed images are fetched from static resource files or publicly available external URLs.

First, we will create an image slider in Salesforce using the inbuilt lightning-carousel element.

Using Lightning-Carousel

We need to create a lightning web component to display slider images using the standard lightning-carousel element.

Follow the below steps:

1. Open the VS code IDE integrated with your Salesforce org, then press the keys ctrl+shift+p to open the Command Palette. Type SFDX and select SFDX: Create Lightning Web Component.

2. Then, provide a name for the component and press enter.

3. This will create the lightning web component. It will generate three files (HTML, JS, and meta.xml) like the screenshot below:

In the next step, we need to add the lightning-carousel element to the HTML file to display the image slider.

By default, the HTML file will have the <template></template> tag.

Paste the below code inside the <template> tag to define the UI.

<template>
    <lightning-card title="LWC Carousel"></lightning-card>
    <div class="slds-size_3-of-4">
        <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">Lightning Web Component Carousel
            <lightning-carousel>
                <lightning-carousel-image
                    src = "https://www.lightningdesignsystem.com/assets/images/carousel/carousel-01.jpg"
                    header = "First Card"
                    description = "First card description."
                    alternative-text = "First card accessible description.">
                </lightning-carousel-image>
                <lightning-carousel-image
                    src = "https://www.lightningdesignsystem.com/assets/images/carousel/carousel-02.jpg"
                    header = "Second Card"
                    description = "Second card description."
                    alternative-text = "Second card accessible description.">
                </lightning-carousel-image>
                <lightning-carousel-image
                    src = "https://www.lightningdesignsystem.com/assets/images/carousel/carousel-03.jpg"
                    header = "Third Card"
                    description = "Third card description."
                    alternative-text = "Third card accessible description.">
                </lightning-carousel-image>
            </lightning-carouse