Carousel – Once UI

An interactive component for displaying a collection of images with smooth transitions and navigation controls. The Carousel supports both line and thumbnail indicators for navigation between images.

Carousel

<Carousel
  items={[
    { slide: "/images/1.jpg", alt: "Image 1" },
    { slide: "/images/2.jpg", alt: "Image 2" },
  ]}
/>

Indicator

The Carousel supports two types of indicators for navigation: line (default) and thumbnail.

Indicator

<Carousel
  indicator="line"
  items={[
    { slide: "/images/1.jpg", alt: "Image 1" },
    { slide: "/images/2.jpg", alt: "Image 2" },
  ]}
/>

<Carousel
  indicator="thumbnail"
  items={[
    { slide: "/images/1.jpg", alt: "Image 1" },
    { slide: "/images/2.jpg", alt: "Image 2" },
  ]}
/>

Controls

You can hide the controls with the controls prop.

Controls

<Carousel
  controls={false}
  items={[
    { slide: "/images/1.jpg", alt: "Image 1" },
    { slide: "/images/2.jpg", alt: "Image 2" },
  ]}
/>

Aspect ratio

You can customize the aspect ratio of the carousel to fit your design needs.

Aspect ratio

<Carousel
  aspectRatio="4 / 3"
  items={[
    { slide: "/images/1.jpg", alt: "Image 1" },
    { slide: "/images/2.jpg", alt: "Image 2" },
  ]}
/>

Auto Play

You can enable auto play with the play prop.

Auto Play

<Carousel
  controls={false}
  indicator={false}
  play={{auto: true, interval: 5000, controls: true, progress: true}}
  items={[
    { slide: "/images/1.jpg", alt: "Image 1" },
    { slide: "/images/2.jpg", alt: "Image 2" },
  ]}
/>

Custom content

You can place custom content inside the slides as ReactNode.

Custom content

Slide 1

<Carousel
  items={[
    { slide: <Row height={20} fill center radius="s" background="brand-strong"><Text>Slide 1</Text></Row> },
    { slide: <Row height={20} fill center radius="s" background="accent-strong"><Text>Slide 2</Text></Row> },
  ]}
/>

API reference

Prop	Type	Default
itemsrequired	CarouselItem[]	[]
controls	boolean	true
priority Eager-load the first slide. Use it when the carousel is above the fold.	boolean	false
stretch Drop the intrinsic aspect ratio and let slides fill their box.	boolean	false
indicator	linethumbnailfalse	line
translateY	SpacingTokennumber	—
aspectRatio	string	original
sizes	string	—
unoptimized	boolean	false
revealedByDefault	boolean	false
thumbnail Sizing of the thumbnail strip when indicator is "thumbnail".	ThumbnailItem	{ scaling: 1, height: "80", sizes: "120px" }
play Autoplay behaviour and the controls shown for it.	{ auto?: boolean; interval?: number; controls?: boolean; progress?: boolean; }	{ auto: false, interval: 3000, controls: true }
…and every FlexProps prop	inherited	—
auto	boolean	false