# Carousel Item

> Source: https://design.nanatec.co.ke/components/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.

## Usage

```html
<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>
```

```html
<nana-carousel navigation="arrows dots">
  <nana-carousel-item>
    <img src="/photo-1.jpg" alt="A mountain at dawn" />
  </nana-carousel-item>
  <nana-carousel-item>
    <!-- any content: cards, testimonials, video … -->
    <article class="card">…</article>
  </nana-carousel-item>
</nana-carousel>
```

## Import

```ts
import "@nana-tec/ui-components/carousel-item";
// or get it together with the container:
import "@nana-tec/ui-components/carousel";
```

## Slots & Parts

## 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

<ul class="related not-content">
  <li><a href="/components/carousel/">Carousel</a></li>
  <li><a href="/components/table/">Table</a></li>
  <li><a href="/components/image-comparer/">Image Comparer</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-carousel-item--docs