Advanced.carousel
Progressive
Carousel shell.
Render slides in :item slots and wire interactions with a LiveView hook or external script.
Carousel
Slide one
Slide two
<.carousel id="feature-carousel">
<:item><div class="rounded-md bg-muted p-8 text-sm">Slide one</div></:item>
<:item><div class="rounded-md bg-muted/60 p-8 text-sm">Slide two</div></:item>
</.carousel>
Autoplay with indicators
Overview
Analytics
Deployments
<.carousel id="marketing-carousel" autoplay={4000} indicators={true}>
<:item><div class="rounded-md bg-muted p-8 text-sm">Overview</div></:item>
<:item><div class="rounded-md bg-muted/60 p-8 text-sm">Analytics</div></:item>
<:item><div class="rounded-md bg-muted/40 p-8 text-sm">Deployments</div></:item>
</.carousel>
Attributes
| Name | Type | Default | Values | Global Includes |
|---|---|---|---|---|
autoplay
|
:integer |
— | — | — |
class
|
:string |
— | — | — |
id
Required
|
:string |
— | — | — |
indicators
|
:boolean |
false
|
— | — |
rest
|
:global |
— | — | — |
Slots
| Slot | Slot Attributes |
|---|---|
item
Required
|
— |