TransWikia.com

LWC Cards carousel

Salesforce Asked by starhunter on December 6, 2020

I need to implement carousel of cards in lwc using left and right arrows, similar to the home Page in Salesforce (shown below). Is there any out of box lwc component available for the same. I tried using lightning-carousel but seems that is for only images with one screen at a time. Any leads will help

enter image description here

One Answer

Yes use lightning-carousel

<template>
    <div class="slds-size_3-of-4">
        <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">Carousel With disable-auto-scroll Attribute
        <lightning-carousel disable-auto-scroll>
            <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."
                href = "https://www.salesforce.com">
            </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."
                href = "https://www.salesforce.com">
            </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."
                href = "https://www.salesforce.com">
            </lightning-carousel-image>
        </lightning-carousel>
        </div>
  </div>
</template>

If you need to use components other than images, then you will need to create the custom one. You can refer to the SLDS Carousel docs for that.

Documentations

Answered by rahul gawale on December 6, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP