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

      • 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.