Carousel generator
Home page banners and campaign highlights use lightning-carousel to rotate a small number of featured items. Style the gradient overlay, title type and indicator dots so text stays legible over any image.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-carousel class="studio-carousel">
<lightning-carousel-image
src="/assets/images/carousel-1.jpg"
header="Spring Release Highlights"
description=""
alternative-text="Spring Release Highlights"
></lightning-carousel-image>
<lightning-carousel-image
src="/assets/images/carousel-2.jpg"
header="New Dashboard Layouts"
description=""
alternative-text="New Dashboard Layouts"
></lightning-carousel-image>
<lightning-carousel-image
src="/assets/images/carousel-3.jpg"
header="Mobile App Update"
description=""
alternative-text="Mobile App Update"
></lightning-carousel-image>
</lightning-carousel>
</template>Design tips for carousels
- Keep carousels to 3–5 slides — more than that and completion rates drop sharply since most users never scroll past slide one.
- Always use a gradient overlay behind slide text; flat images alone rarely give enough contrast for accessible text.
- Make the first slide your most important message — many users never advance past it.