A carousel or slider is a collection of images that display one after another. It is used across many websites for the purpose of attraction or to make your website’s home page look good to the visitor. A carousel can consist of multiple attractive images, videos, or hyperlink content but Salesforce only supports up to five images in its standard carousel. Using a carousel in Salesforce is pretty easy and simple as Salesforce provides us with a lightning-carousel tag inside which we can use the lightning-carousel-image and provide it with the link for the image we want to display, we can also provide each image with a header, descriptive text, alternate text, and link.
In the Salesforce standard carousel, we can also:
- Disable auto-scrolling
- Disable continuous looping
- Change the number of seconds each image displays
A sample carousel:
Code:
<template>
<div style="height : 50%">
<div class="slds-size_3-of-4">
<lightning-carousel>
<lightning-carousel-image
src = "https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg"
header = "First Image"
description = "First card description."
alternative-text = "First card accessible description."
href = "javascript:void(0);">
</lightning-carousel-image>
<lightning-carousel-image
src = "https://img.freepik.com/free-photo/lone-tree_181624-46361.jpg"
header = "Second Image"
description = "Second card description."
alternative-text = "Second card accessible description."
href = "javascript:void(0);">
</lightning-carousel-image>
<lightning-carousel-image
src = "https://img.freepik.com/free-photo/digital-painting-mountain-with-colorful-tree-foreground_1340-25699.jpg"
header = "Third Image"
description = "Third card description."
alternative-text = "Third card accessible description."
href = "javascript:void(0);">
</lightning-carousel-image>
</lightning-carousel>
</div>
</div>
</template>