Close Menu
SalesforceCodex
    Facebook X (Twitter) Instagram
    Trending
    • Building a Dynamic Tree Grid in Lightning Web Component
    • 10 Salesforce Chrome Extensions to Boost Your Productivity
    • How to Build a Generic Modal Window in Lightning Web Component
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    • How to Suppress PMD Warnings in Salesforce Apex
    Facebook X (Twitter) Instagram
    SalesforceCodex
    Subscribe
    Sunday, June 29
    • Home
    • Architecture
    • Salesforce
      • News
      • Apex
      • Integration
      • Books Testimonial
    • Questions
    • Certification
      • How to Prepare for Salesforce Integration Architect Exam
      • Certification Coupons
    • Integration Posts
    • Downloads
    • About Us
      • Privacy Policy
    SalesforceCodex
    Home»Salesforce»Lightning»Custom Image Slider in Lightning Web Component

    Custom Image Slider in Lightning Web Component

    Dhanik Lal SahniBy Dhanik Lal SahniAugust 26, 2022Updated:January 12, 202513 Comments2 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    Custom Image Slider in Lightning Web Component
    Share
    Facebook Twitter LinkedIn Pinterest Email

    While working on Community Portal, sometimes we have to show images or content as a slider component. We have a lightning carousel element but there are limitation on standard carousel elements. This post will give step-by-step detail to create a custom image slider in Lightning Web Component.

    To create a custom image slider (image carousel) in Salesforce, I am using external Js library – flickity. There are many other slider libraries like Slick, Owl Carousel 2, BxSlider, and GliderJS. Best on your preference and requirement, you can choose any external js.

    Steps to create Custom Image Carousel in LWC

    1. Download flickity JS library
    2. Add required files to static resources
    3. Create LWC component
    4. Test component

    1. Download flickity JS library

    Download the below files from https://flickity.metafizzy.co/.

    1. JS file flickity.pkgd.min.js
    2. CSS file flickity.css

    This library requires jQuery so download it from https://cdnjs.com/libraries/jquery/3.0.0

    Add all the above three files into the flickity.zip file.

    2. Add required files to static resources

    Add the above-created flickity.zip into the static resource as flickity. Set Cache-Control as public for this static resource.

    Custom Image Slider- SalesforceCodex

    3. Create Lightning Web component

    We have added the required JS and CSS files in the static resource. Let us create an LWC component to create an image carousel using these files. This library has options to create any type of slider. For demo purposes, I have created a component that has images, images with text, and only text slides.

    We have to import static resources and run the below code to start the image slider.

    $('.main-carousel').flickity({
      // slider options. Checkout other options form website
      cellAlign: 'left',
      contain: true
    });

    LWC Code:

    Below code will be added to the component to create the custom slider. Setup options based on your requirement like autoplay time.

    4. Test component

    Add the above-created component where you want to give image slide capability. I have added that on the Home page.

    References:

    • Flickity
    • Use Third-Party JavaScript Libraries

    Similar Posts

    • How to Use Image Cropper in Salesforce Lightning Web Component
    • Configurable Record Picker in Lightning Web Component
    • Displaying Tabular Data with GraphQL in Lightning Web Component
    • Export Data from Lightning Web Component to Excel Sheet
    • Generate PDF using jsPDF in Lightning Web Component
    custom image carousel custom image carousel in lwc custom image slider in lwc external js in lwc flickity in lwc image carousel image slider in lightning image slider in lwc image slider in salesforce salesforce
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Previous ArticleBuild Scalable Solutions with Salesforce
    Next Article Reusable Custom Calendar LWC using FullCalendar Js Library
    Dhanik Lal Sahni
    • Website
    • Facebook
    • X (Twitter)

    With over 18 years of experience in web-based application development, I specialize in Salesforce technology and its ecosystem. My journey has equipped me with expertise in a diverse range of technologies including .NET, .NET Core, MS Dynamics CRM, Azure, Oracle, and SQL Server. I am dedicated to staying at the forefront of technological advancements and continuously researching new developments in the Salesforce realm. My focus remains on leveraging technology to create innovative solutions that drive business success.

    Related Posts

    By Dhanik Lal Sahni4 Mins Read

    Building a Dynamic Tree Grid in Lightning Web Component

    June 29, 2025
    By Dhanik Lal Sahni9 Mins Read

    10 Salesforce Chrome Extensions to Boost Your Productivity

    June 1, 2025
    By Dhanik Lal Sahni4 Mins Read

    How to Build a Generic Modal Window in Lightning Web Component

    May 26, 2025
    View 13 Comments

    13 Comments

    1. Pavan on November 29, 2022 10:00 pm

      HI Sir,

      $(‘.main-carousel’).flickity({
      // slider options. Checkout other options form website
      cellAlign: ‘left’,
      contain: true
      });

      This snippet we have to Use can you please tell me

      Reply
      • Dhanik Lal Sahni on December 7, 2022 8:04 pm

        Yes, You can use it like i have used in below code.

        $(this.template.querySelector('div[class="carousel"]')).flickity({
        autoPlay: 1000,
        cellAlign: ‘left’,
        contain: true
        });

        Reply
    2. Sachin on March 9, 2023 1:47 pm

      When I click on the next or previous arrow from the image, the image slider stops.
      Could you please provide the details about it.
      Thank you.

      Reply
      • Dhanik Lal Sahni on March 12, 2023 10:36 am

        Hello Sachin,
        You have to check the js issues in the console log. Without any info, I will not be able to help you.
        You can connect on Linkedin to resolve your issue.

        Thank You,
        Dhanik

        Reply
    3. Priyanka S on March 24, 2023 10:40 am

      Where we have to put this code??
      In which file?

      Reply
      • Dhanik Lal Sahni on March 28, 2023 8:08 am

        Hello Priyanka,

        Which code you are asking for?

        Thank You,
        Dhanik

        Reply
    4. keval on May 26, 2023 6:45 pm

      While using this in LWC component it needs to be refresh two three times after it is loading properly what may be the issue

      Reply
      • Dhanik Lal Sahni on May 27, 2023 10:05 am

        Hello Keval,
        Lightning code is cached so we have to refresh multiple times for clening cache. I prefer to use mozila while working with LWC, it clear cache immediately.

        Thank You,
        Dhanik

        Reply
    5. Narsa Reddy on August 12, 2023 12:53 am

      Hi,
      When I use for:each to iterate the list of images that are returned from the apex, It is not working properly. It is displaying all the images vertically. The images are not sliding like you have shown. What could be the issue.

      Reply
      • Dhanik Lal Sahni on August 13, 2023 12:30 pm

        Hello Narsa,

        Looks like js is not loaded properly. Please check once js library. Ping me on linkedin if not working.

        Thank You,
        Dhanik

        Reply
    6. Narsa Reddy on August 15, 2023 12:34 am

      Sure Dhanik. I have posted more details in the LinkedIn with the source code.

      Reply
    7. Pratyush on February 21, 2024 5:00 pm

      Hi Dhanik, this doesn’t work for pdfs or any other formats, except images. How do we make this work? Any tips will be greatly appreciated. Thanks

      Reply
      • Dhanik Lal Sahni on March 8, 2024 8:57 pm

        Hello Pratyush,
        This slider for Image only.You can use any other JS library that support PDF sliding. You can check options at here.

        Thank You,
        Dhanik

        Reply
    Leave A Reply Cancel Reply

    Ranked #1 SALESFORCE DEVELOPER BLOG BY SALESFORCEBEN.COM
    Featured on Top Salesforce Developer Blog By ApexHours
    Recent Posts
    • Building a Dynamic Tree Grid in Lightning Web Component
    • 10 Salesforce Chrome Extensions to Boost Your Productivity
    • How to Build a Generic Modal Window in Lightning Web Component
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    Ranked in Top Salesforce Blog by feedspot.com
    RSS Recent Stories
    • Top 20 Salesforce Data Cloud Interview Questions & Answers for Admins June 5, 2025
    • How to Connect Excel to Salesforce to Manage Your Data and Metadata February 9, 2025
    • Difference Between With Security and Without Security in Apex January 2, 2025
    • Top Reasons to Love Salesforce Trailhead: A Comprehensive Guide December 5, 2024
    • How to Utilize Apex Properties in Salesforce November 3, 2024
    Archives
    Categories
    Tags
    apex (112) apex code best practice (8) apex rest (11) apex trigger best practices (4) architecture (22) Asynchronous apex (9) AWS (5) batch apex (9) batch processing (4) code optimization (8) custom metadata types (5) design principle (9) einstein (3) flow (15) future method (4) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (66) lightning-combobox (5) lightning-datatable (10) lightning component (32) Lightning web component (64) lwc (53) named credential (8) news (4) optimize apex code (4) Permission set (4) Queueable (9) rest api (23) S3 Server (4) salesforce (143) salesforce apex (48) salesforce api (4) salesforce api integration (5) salesforce bulk api (3) Salesforce Interview Question (4) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Visual Studio Code (3) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    Facebook X (Twitter) Instagram Pinterest YouTube Tumblr LinkedIn Reddit Telegram
    © 2025 SalesforceCodex.com. Designed by Vagmine Cloud Solution.

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Our website is made possible by displaying online advertisements to our visitors. Please support us by disabling your Ad Blocker.