Carousel

A content surface for displaying multiple images or cards horizontally.

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

Name	Type	Default Value	Required	Description
controls	boolean	false	No	Show previous/next controls?
progress	boolean	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