Navigation

Carousel

A keyboard and pointer accessible scroller for moving through a collection of items.

CarouselView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

One

Two

Three

Four

Five

tsx

import { Cell } from "retend";

import { Carousel } from "innate-ui";
import classes from "../docs.module.css";

export function CarouselDemo() {
  const item = Cell.source(0);
  return (
    <Carousel
      value={item}
      onChange={(index) => item.set(index)}
      ariaLabel="Featured examples"
      class={classes.carouselDemo}
    >
      <Carousel.Scroller fade class={classes.carouselScroller}>
        <Carousel.Item ariaLabel="First item">
          <div class={classes.carouselItem}>One</div>
        </Carousel.Item>
        <Carousel.Item ariaLabel="Second item">
          <div class={classes.carouselItem}>Two</div>
        </Carousel.Item>
        <Carousel.Item ariaLabel="Third item">
          <div class={classes.carouselItem}>Three</div>
        </Carousel.Item>
        <Carousel.Item ariaLabel="Fourth item">
          <div class={classes.carouselItem}>Four</div>
        </Carousel.Item>
        <Carousel.Item ariaLabel="Fifth item">
          <div class={classes.carouselItem}>Five</div>
        </Carousel.Item>
      </Carousel.Scroller>
      <div class={classes.carouselControls}>
        <Carousel.Previous />
        <Carousel.Markers />
        <Carousel.Next />
      </div>
    </Carousel>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

CarouselProps

Prop	Type	Default
`value`required Index of the active carousel item.	`JSX.ValueOrCell<number>`	`—`
`onChange` Called when navigation requests a different active item.	`(index: number) => void`	`—`
`children`required Carousel parts and items.	`JSX.Children`	`—`
`ariaLabel`required Accessible label for the carousel region.	`JSX.ValueOrCell<string>`	`—`

Inspect the typed source →