Data Display & Media
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.
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.
<nana-carousel navigation="arrows dots" style="width: 100%">
<nana-carousel-item>
<img
src="https://picsum.photos/seed/1/800/400"
alt="A mountain at dawn"
style="width: 100%; display: block"
/>
</nana-carousel-item>
<nana-carousel-item>
<img
src="https://picsum.photos/seed/2/800/400"
alt="A city at night"
style="width: 100%; display: block"
/>
</nana-carousel-item>
<nana-carousel-item>
<img
src="https://picsum.photos/seed/3/800/400"
alt="A forest path"
style="width: 100%; display: block"
/>
</nana-carousel-item>
</nana-carousel><nana-carousel navigation="arrows dots"> <nana-carousel-item> <img src="/photo-1.svg" alt="A mountain at dawn" /> </nana-carousel-item> <nana-carousel-item>
<article class="card">…</article> </nana-carousel-item></nana-carousel>Import
Section titled “Import”import "@nana-tec/ui-components/carousel-item";
import "@nana-tec/ui-components/carousel";Slots & Parts
Section titled “Slots & Parts”| Part | Description |
|---|---|
::part(base) | The slide wrapper |
Accessibility
Section titled “Accessibility”Each item is role="group" with aria-roledescription="slide".
The parent carousel sets the aria-label (“n of total”), so you don’t set it yourself.
Provide real alt text on slide images.
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Carousel Item interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook