Products · Components
Carousel
Slides the person swipes between, one at a time, with dots below.
Put one child in it for each slide, such as an Image or a card.
Children: Components
Example
<Carousel indicator="dots" gap="small">
<Image src="statics/photo.jpg" alt="First slide" aspect="16:9" fit="cover" shape="rounded" />
<Image src="statics/photo.jpg" alt="Second slide" aspect="16:9" fit="cover" shape="rounded" />
</Carousel>Props
| Prop | Type | What it is |
|---|---|---|
autoplay | boolean | Moves to the next slide every interval milliseconds, pausing while touched. Default: false. |
interval | number | In milliseconds. Default: 4000. |
loop | boolean | After the last slide comes the first again. Default: false. |
indicator | dots, none | Default: dots. |
gap | spacing | Space between slides, seen while one slides in. Default: none. |
effect | slide, scale | scale shrinks a slide as it leaves the middle and grows the one coming in, as you swipe. Default: slide. |
index | number | The slide to show. Changing it moves the carousel there. |
padding, paddingTop, paddingStart, paddingEnd, paddingBottom | spacing | Space inside its edges, all round or on one side. |
Events
| Event | Sends | Notes |
|---|---|---|
onChange | { index } in detail | The slide now showing. |