Homecomponentsstructural

Carousel

A container that allows items within to be scrolled by page-by-page.

Overview

Creates a scrollable window within which the items are placed in scrollable pages in a single row.

The following examples lays out several Cards inside a carousel.

1

2

3

4

5

6

7

Open in Playroom

Number of Items Per Page

You can use the itemsPerPage property to set the number of items visible on a page. This property is responsive, so you could change the number of visible items on different breakpoints.

Here's an example that uses the itemsPerPage to show one item on mobile, two on tablet, and three for the rest. Open the example in Playroom to view all the breakpoints together.

1

2

3

4

5

6

7

Open in Playroom

Showing a peek of next page

Use the peek property to show a little part of the next page.

1

2

3

4

5

6

7

Open in Playroom

Controlling the Carousel

Carousel is a controlled component. That is, you need to use state to set the currentPage and respond to onChange by setting the given page.

This gives you full control of the carousel, e.g., you can use Buttons to make it move to the next or previous page. Or create your own pagination.

The following example lays out several RemoteImage elements inside the scroller with a couple of buttons to navigate the carousel.

Note that the logic to handle overflows is to be handled by the application code. If you use responsive values for itemsPerPage, then you would need to use the useResponsiveValue hook to get the resolved value for the breakpoint.