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
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.
Answered by rahul gawale on December 6, 2020
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP