Carousel

A content surface for displaying multiple images or cards horizontally.

Work in progress

The API and design of these components will be changing significantly due to design revisions. DO NOT USE YET.

Examples

Basic Carousel

The most basic carousel has no controls. On touch devices, it can be swiped. On desktop, clicking on the next image will scroll it into view. The carousel scrolls infinitely horizontally as there is no "back" button.

Responsive Carousel w/ Controls

You may specify how many slides to show in three ways:

• As a fixed number (1)
• Based on the component size:

  {
    componentSizes: {
      500: 3,
      700: 4,
    }
  }
• Based on the window size or breakpoint:

  {
    windowSizes: {
      'xs': 1,
      'sm': 2,
      600: 3
    }
  }

Props

CarouselProps

Name	Type	Default Value	Required	Description
controls	false | true	false	No	Show previous/next controls?
progress	false | true	false	No	Should progress be shown? `controls` must also be `true`
slidesToShow	string | number | SlidesToShow	1	No	How many slides to show, with optional component or screen breakpoints