For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/en/components/carousel.md.
Leaf UIReact components
GitHub

Carousel

Browse images or content one slide at a time.

Basic usage

Plan
1 / 3
basic.tsx
import { Carousel } from '@ifhover/leaf-ui';

const slides = [
  { key: 'plan', zh: '计划', en: 'Plan', color: '#edf6ee' },
  { key: 'create', zh: '创作', en: 'Create', color: '#eef3ff' },
  { key: 'share', zh: '分享', en: 'Share', color: '#fff5df' },
];

export function CarouselBasic() {
  return (
    <Carousel aria-label={'Project stages'}>
      {slides.map((slide) => (
        <div
          key={slide.key}
          style={{
            display: 'grid',
            placeItems: 'center',
            height: 180,
            background: slide.color,
            color: '#24372c',
            fontSize: 24,
          }}
        >
          {slide.en}
        </div>
      ))}
    </Carousel>
  );
}

Autoplay

Plan
1 / 3
basic.tsx
import { Carousel } from '@ifhover/leaf-ui';

const slides = [
  { key: 'plan', zh: '计划', en: 'Plan', color: '#edf6ee' },
  { key: 'create', zh: '创作', en: 'Create', color: '#eef3ff' },
  { key: 'share', zh: '分享', en: 'Share', color: '#fff5df' },
];

export function CarouselAutoplay() {
  return (
    <Carousel autoplay={5000} arrows={false} aria-label={'Highlights'}>
      {slides.map((slide) => (
        <div
          key={slide.key}
          style={{
            display: 'grid',
            placeItems: 'center',
            height: 150,
            background: slide.color,
            color: '#24372c',
          }}
        >
          {slide.en}
        </div>
      ))}
    </Carousel>
  );
}

CarouselHandle

PropertyTypeDefaultDescription
goTo(index: number) => void—Required. Go to a slide index.
next() => void—Required. Go to the next item.
previous() => void—Required. Go to the previous item.
PropertyTypeDefaultDescription
activeIndexnumber—Controlled slide index.
defaultActiveIndexnumber0Initial slide index.
onChange(index: number) => void—Called when the value changes.
arrowsbooleantrueShow previous and next controls.
dotsbooleantrueShow slide indicators.
autoplayboolean | numberfalseEnable autoplay; a number sets the interval in milliseconds.
infinitebooleantrueAllow cycling through slides.
pauseOnHoverbooleantruePause on hover; focus also pauses playback.

Types and interaction

Import the props and data types when creating reusable configuration.

import type { CarouselHandle, CarouselProps } from '@ifhover/leaf-ui';

Provide accessible labels for icon-only actions. Interactive controls support keyboard navigation and respect ConfigProvider themes and reduced motion.