Carousel Item

View .md Download

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

<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

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

Slots & Parts

Part	Description
`::part(base)`	The slide wrapper

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.

Storybook

Explore Carousel Item interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook