Carousel

The Carousel component is a powerful and flexible component for creating interactive, scrollable galleries of content. It supports draggable slides and optional navigation controls.

<Carousel padding={400} gap={400}>
  <Surface size={{ width: 800, height: 600 }} />
  <Surface size={{ width: 800, height: 600 }} />
  <Surface size={{ width: 800, height: 600 }} />
  <Surface size={{ width: 800, height: 600 }} />
  <Surface size={{ width: 800, height: 600 }} />
</Carousel>

Features

Controls

The Carousel provides different control options for navigation: arrows, indicators, or both. Use the controls prop with CarouselControls to specify the desired set of controls.

<Carousel
  padding={400}
  gap={400}
  controls={CarouselControls.Arrows}
>
  <Surface size={{ width: 800, height: 600 }} />
  <Surface size={{ width: 800, height: 600 }} />
  <Surface size={{ width: 800, height: 600 }} />
  <Surface size={{ width: 800, height: 600 }} />
  <Surface size={{ width: 800, height: 600 }} />
</Carousel>

<Carousel
  padding={400}
  gap={400}
  controls={CarouselControls.Indicators}
>
  <Surface size={{ width: 800, height: 600 }} />
  <Surface size={{ width: 800, height: 600 }} />
  <Surface size={{ width: 800, height: 600 }} />
  <Surface size={{ width: 800, height: 600 }} />
  <Surface size={{ width: 800, height: 600 }} />
</Carousel>

With Cards

The Carousel is versatile and can contain complex components like Cards.

<Carousel controls={CarouselControls.Indicators} padding={400}>
  <Card
    size={{ width: 850, height: "stretch" }}
    media={(
      <Image
        src="https://picsum.photos/seed/HP9SuN9Ce/1091/2522"
        aspectRatio="2:1"
      />
    )}
    info={{
      title: "Ruddy Turnstone",
      body: "Velum arceo desparatus. Corporis usitas carpo truculenter comburo curiositas nobis absconditus saepe. Constans admitto corporis bestia.",
    }}
  />
  <Card
    size={{ width: 850, height: "stretch" }}
    media={(
      <Image
        src="https://picsum.photos/seed/aOUNz/1802/1521"
        aspectRatio="2:1"
      />
    )}
    info={{
      title: "Little Curlew",
      body: "Capio attonbitus cernuus. Sursum ancilla vesica pel taedium. Peior tredecim pariatur stabilis conventus nesciunt congregatio succurro.",
    }}
  />
  <Card
    size={{ width: 850, height: "stretch" }}
    media={(
      <Image
        src="https://picsum.photos/seed/yTt8F/936/1335"
        aspectRatio="2:1"
      />
    )}
    info={{
      title: "Zenaida Dove",
      body: "Adulatio speculum adamo demum voluptate aggero. Cotidie ustulo demergo talus sequi civitas talis. Vorax solus velit.",
    }}
  />
</Carousel>

Anatomy

1.CarouselThe main container for the carousel.

2.SlidesThe draggable container for the slides.

3.SlideAn individual slide within the carousel.

4.ArrowsNavigation arrows to move between slides.

5.IndicatorsDots that indicate the current slide.

Reference

Props

Name	Type	Default	Description
`children`	`Array<ReactNode>`	`[]`	The array of slides to display in the carousel.
`controls`	`CarouselControls`	`CarouselControls.Both`	The type of navigation controls to display.
`gap`	`FlexSprinkles["gap"]`	-	The gap between slides.
`onChange`	`(index: number) => void`	-	Callback fired when the active slide changes.

The Carousel component also inherits all props from the Column component.

Tokens

Key	Default Value
`carousel.column.base.backgroundColor`	`none`
`carousel.column.base.gap`	`var(--gpqiqdd)`
`carousel.slides.base.gap`	`var(--gpqiqd9)`
`carousel.slide.base.backgroundColor`	`none`
`carousel.slide.base.borderRadius`	`none`
`carousel.indicators.base.backgroundColor`	`var(--_1i4ikbk12)`
`carousel.indicators.base.borderRadius`	`var(--gpqiqdw)`
`carousel.indicators.base.width`	`var(--gpqiqca)`
`carousel.indicators.base.height`	`var(--gpqiqca)`
`carousel.indicators.base.gap`	`var(--gpqiqd7)`
`carousel.indicators.variants.active.true.backgroundColor`	`var(--_1i4ikbkv)`