Default

The <Carousel /> component renders a set of child <CarouselItem /> components in a scrollable layout. What you get out of the box:

Editable example
<Carousel>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 1</p>
        <p>Click the arrow or use the mouse wheel to go to the next slide.</p>
      </div>
    </Card>
  </CarouselItem>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 2</p>
      </div>
    </Card>
  </CarouselItem>
   <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 3</p>
      </div>
    </Card>
  </CarouselItem>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 4</p>
      </div>
    </Card>
  </CarouselItem>
</Carousel>
<Carousel>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 1</p>
        <p>Click the arrow or use the mouse wheel to go to the next slide.</p>
      </div>
    </Card>
  </CarouselItem>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 2</p>
      </div>
    </Card>
  </CarouselItem>
   <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 3</p>
      </div>
    </Card>
  </CarouselItem>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 4</p>
      </div>
    </Card>
  </CarouselItem>
</Carousel>

Multiple items per slide

Use the itemsPerSlide prop to customise how many <CarouselItem /> components to show at once.

Editable example
<Carousel itemsPerSlide={2}>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 1</p>
        <p>Click the arrow or use the mouse wheel to go to the next slide.</p>
      </div>
    </Card>
  </CarouselItem>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 2</p>
      </div>
    </Card>
  </CarouselItem>
   <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 3</p>
      </div>
    </Card>
  </CarouselItem>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 4</p>
      </div>
    </Card>
  </CarouselItem>
</Carousel>
<Carousel itemsPerSlide={2}>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 1</p>
        <p>Click the arrow or use the mouse wheel to go to the next slide.</p>
      </div>
    </Card>
  </CarouselItem>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 2</p>
      </div>
    </Card>
  </CarouselItem>
   <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 3</p>
      </div>
    </Card>
  </CarouselItem>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 4</p>
      </div>
    </Card>
  </CarouselItem>
</Carousel>

Next/Previous button visibility

You can customise when the next/previous buttons appear by setting the buttonsAlwaysShow prop. When true, the controls always show when the carousel can be paged in that direction. When false, the controls will only show while the carousel is hovered/focused. Defaults to true.

Editable example
<Carousel buttonsAlwaysShow={false}>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 1</p>
        <p>Click the arrow or use the mouse wheel to go to the next slide.</p>
      </div>
    </Card>
  </CarouselItem>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 2</p>
      </div>
    </Card>
  </CarouselItem>
   <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 3</p>
      </div>
    </Card>
  </CarouselItem>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 4</p>
      </div>
    </Card>
  </CarouselItem>
</Carousel>
<Carousel buttonsAlwaysShow={false}>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 1</p>
        <p>Click the arrow or use the mouse wheel to go to the next slide.</p>
      </div>
    </Card>
  </CarouselItem>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 2</p>
      </div>
    </Card>
  </CarouselItem>
   <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 3</p>
      </div>
    </Card>
  </CarouselItem>
  <CarouselItem>
    <Card>
      <div className="space-inset-m">
        <p>This is item 4</p>
      </div>
    </Card>
  </CarouselItem>
</Carousel>