Carousel. A keyboard-operable image and content carousel.
- Media
- Interactive
- Stability · Initial
- :::postkit-carousel
1 / 2
Usage.
<Carousel
label="Featured stories"
items='[{"id":"one","image":{"src":"/component-preview.svg","alt":"Abstract editorial artwork"},"title":"A component vocabulary for articles","description":"Rich stories, represented as portable content."},{"id":"two","image":{"src":"/component-preview.svg","alt":"Abstract editorial artwork"},"title":"Themes that belong to the host","description":"Use Chakra recipes without fighting library CSS."}]'
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | JSON string | None | A JSON array of carousel items. |
| headingLevel | "2" | "3" | "4" | "5" | "6" | None | Renders each item title as a heading at this level. Leave it unset and item titles are paragraphs, so the carousel never breaks the page's heading outline. |
| label | string | "Article carousel" | The accessible name for the carousel. |
| initialIndex | number | None | The initially visible zero-based item index. |
| presentation | "slides" | "peek" | "slides" | slides shows one item with a position status; peek centres the current item with its neighbours in view, arrows only, and announces its caption. Neither advances on its own. |
| Appearance | |||
| size | "sm" | "md" | "lg" | "md" | The component density and type scale. |
| variant | "outline" | "subtle" | "plain" | "subtle" | The component visual treatment. |
Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles
Anatomy. Every part is yours to restyle.
Every part
- root
- slide
- media
- content
- title
- description
- link
- controls
- previousTrigger
- status
- nextTrigger
- emptyState
- caption
- number
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailAs text
- Astro @postkit/astroHydrated
- Web components @postkit/elementsPlanned