Carousel

Steps through slides with buttons and indicators.

CarouselProps packages/core/src/advanced-controls.ts:26 ↗

Import

import { Carousel } from "@tarve/core";

Usage

Carousel.tsx

import { Carousel, Text } from "@tarve/core";

let index = 0;

<Carousel
  index={index}
  loop
  items={[
    { value: "one", content: <Text size={32}>One</Text> },
    { value: "two", content: <Text size={32}>Two</Text> },
    { value: "three", content: <Text size={32}>Three</Text> },
  ]}
  onIndexChange={(next) => {
    index = next;
  }}
/>

Props

Prop	Type	Default
`index` required	`number`	—
`items` required	`readonly CarouselItem[]`	—
`loop`	`boolean`	`false`
`nextLabel`	`string`	`"Next slide"`
`onIndexChange`	`(index: number) => void`	—
`previousLabel`	`string`	`"Previous slide"`
`showIndicators`	`boolean`	`true`

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

CarouselItem

interface CarouselItem {
  value: string;
  content: Child;
  label?: string;
}