Carousel
A row that scrolls horizontally and snaps to its slides, with previous and next arrows. Put CarouselItem or CarouselMediaItem children in it. Bind activeIndex with { "@path": "/x" } to read or set the slide in view.
Examples
Loading examples…
Props
| Prop | Type | Description |
|---|---|---|
align | "start" | "center" | "end" | "baseline" | "stretch" | |
justify | "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly" | "stretch" | |
wrap | "nowrap" | "wrap" | "wrap-reverse" | |
gap | number | string | 4px steps when a number |
rowGap | number | string | |
columnGap | number | string | |
padding | number | string | 4px steps when a number |
background | string | One of surface|surface-secondary|surface-tertiary|surface-elevated|surface-elevated-secondary|surface-inverted|surface-soft|info|warning|caution|success|danger|discovery|info-solid|warning-solid|caution-solid|success-solid|danger-solid|discovery-solid or a CSS color. Leave it unset. Only one summary panel in a Card can use "surface-secondary" |
border | boolean | |
borderColor | "default" | "subtle" | "strong" | "info" | "warning" | "caution" | "success" | "danger" | "discovery" | |
radius | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | number | string | object | |
width | number | string | |
height | number | string | |
minWidth | number | string | |
maxWidth | number | string | |
minHeight | number | string | |
maxHeight | number | string | |
flex | number | |
weight | number | flex-grow in a Row or Column |
aspectRatio | string | |
scrollable | boolean | |
clip | boolean | |
shadow | boolean | |
inline | boolean | |
role | string | ARIA role |
flush | boolean | No padding |
minSize | number | string | Minimum width and height |
maxSize | number | string | Maximum width and height |
disableAutoSpacing | boolean | No default gap between children |
label | string | A short name of the carousel for screen readers |
visibleItems | number | |
showArrows | boolean | Default true |
activeIndex | number | The index of the slide in view. Bind it with { "@path": "/x" } to read or set it |
previousLabel | string | Default "Previous" |
nextLabel | string | Default "Next" |
snap | "none" | "proximity" | "mandatory" | |
snapAlign | "start" | "center" | "end" |
Slots
children· multiple
Events
onVisible· Sent once, the first time the container scrolls into view. Use it to load more content lazily.
CarouselItem
A slide of a Carousel.
Loading examples…
| Prop | Type | Description |
|---|---|---|
align | "start" | "center" | "end" | "baseline" | "stretch" | |
justify | "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly" | "stretch" | |
wrap | "nowrap" | "wrap" | "wrap-reverse" | |
gap | number | string | 4px steps when a number |
rowGap | number | string | |
columnGap | number | string | |
padding | number | string | 4px steps when a number |
background | string | One of surface|surface-secondary|surface-tertiary|surface-elevated|surface-elevated-secondary|surface-inverted|surface-soft|info|warning|caution|success|danger|discovery|info-solid|warning-solid|caution-solid|success-solid|danger-solid|discovery-solid or a CSS color. Leave it unset. Only one summary panel in a Card can use "surface-secondary" |
border | boolean | |
borderColor | "default" | "subtle" | "strong" | "info" | "warning" | "caution" | "success" | "danger" | "discovery" | |
radius | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | number | string | object | |
width | number | string | |
height | number | string | |
minWidth | number | string | |
maxWidth | number | string | |
minHeight | number | string | |
maxHeight | number | string | |
flex | number | |
weight | number | flex-grow in a Row or Column |
aspectRatio | string | |
scrollable | boolean | |
clip | boolean | |
shadow | boolean | |
inline | boolean | |
role | string | ARIA role |
flush | boolean | No padding |
minSize | number | string | Minimum width and height |
maxSize | number | string | Maximum width and height |
disableAutoSpacing | boolean | No default gap between children |
Slots
children· multiple
Events
onVisible· Sent once, the first time the container scrolls into view. Use it to load more content lazily.
CarouselMediaItem
A slide of a Carousel with an image on top and its children (a Caption, a Text) under it. size "sm" is 160px, "md" 240px (default), "lg" 320px wide. A click on the image opens all slides full-screen, unless href or onClick is set.
Loading examples…
| Prop | Type | Description |
|---|---|---|
align | "start" | "center" | "end" | "baseline" | "stretch" | |
justify | "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly" | "stretch" | |
wrap | "nowrap" | "wrap" | "wrap-reverse" | |
gap | number | string | 4px steps when a number |
rowGap | number | string | |
columnGap | number | string | |
padding | number | string | 4px steps when a number |
background | string | One of surface|surface-secondary|surface-tertiary|surface-elevated|surface-elevated-secondary|surface-inverted|surface-soft|info|warning|caution|success|danger|discovery|info-solid|warning-solid|caution-solid|success-solid|danger-solid|discovery-solid or a CSS color. Leave it unset. Only one summary panel in a Card can use "surface-secondary" |
border | boolean | |
borderColor | "default" | "subtle" | "strong" | "info" | "warning" | "caution" | "success" | "danger" | "discovery" | |
radius | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | number | string | object | |
width | number | string | |
height | number | string | |
minWidth | number | string | |
maxWidth | number | string | |
minHeight | number | string | |
maxHeight | number | string | |
flex | number | |
weight | number | flex-grow in a Row or Column |
aspectRatio | string | Default "4 / 3" |
scrollable | boolean | |
clip | boolean | |
shadow | boolean | |
inline | boolean | |
role | string | ARIA role |
flush | boolean | No padding |
minSize | number | string | Minimum width and height |
maxSize | number | string | Maximum width and height |
disableAutoSpacing | boolean | No default gap between children |
url | string | Image URL |
description | string | What the image shows, for screen readers |
size | "sm" | "md" | "lg" | The width: "sm" 160px, "md" 240px, "lg" 320px. Default "md" |
href | string | Opens this URL in a new tab |
lightbox | boolean | Default true: a click opens all slides full-screen |
Slots
children· multiple
Events
onVisible· Sent once, the first time the container scrolls into view. Use it to load more content lazily.onClick· Sent when the user clicks the image. It replaces the full-screen view.