Carousel Item
A single slide inside a
carousel.
It is a thin, separately-importable wrapper that takes any content. The parent
nana-carousel
sizes it (slides-per-view / peek) and labels it ("3 of 8") for screen readers.
Usage
Slide 1
Slide 2
Slide 3
html
| 1 | <nana-carousel navigation="arrows dots"> |
| 2 | <nana-carousel-item> |
| 3 | <img src="/photo-1.jpg" alt="A mountain at dawn" /> |
| 4 | </nana-carousel-item> |
| 5 | <nana-carousel-item> |
| 6 | <!-- any content: cards, testimonials, video … --> |
| 7 | <article class="card">…</article> |
| 8 | </nana-carousel-item> |
| 9 | </nana-carousel> |
Import
ts
| 1 | import "@nana-tec/ui-components/carousel-item"; |
| 2 | // or get it together with the container: |
| 3 | import "@nana-tec/ui-components/carousel"; |
Slots & Parts
| Name | Kind | Description |
|---|---|---|
(default) | slot | The slide content |
base | part | The slide wrapper |
Accessibility
- Each item is
role="group"witharia-roledescription="slide". - The parent carousel sets the
aria-label("n of total"), so you don't set it yourself. - Provide real
alttext on slide images.