Carousel

A dynamic Carousel component that displays a collection of items, such as images or cards, in a scrollable or automatically sliding sequence.

Usage

Basic Carousel

Render the Carousel with a list of ReactNode:

<Carousel
  items={[
    <Image src={'https://images.unsplash.com/photo-1620120966883-d977b57a96ec?q=80'} />,
    <Image src={'https://images.unsplash.com/photo-1620121684840-edffcfc4b878?q=80'} />,
    <Image src={'https://images.unsplash.com/photo-1620121692029-d088224ddc74?q=80'} />,
  ]}
/>

Carousel with Custom Controls

Include custom navigation controls like arrows or indicators:

<Carousel
  items={[
    <Image src={'https://images.unsplash.com/photo-1620120966883-d977b57a96ec?q=80'} />,
    <Image src={'https://images.unsplash.com/photo-1620121684840-edffcfc4b878?q=80'} />,
    <Image src={'https://images.unsplash.com/photo-1620121692029-d088224ddc74?q=80'} />,
  ]}
  prevButton={<Icon type={'Zap'} />}
  nextButton={<Icon type={'Zap'} />}
/>

API

Props

Carousel