Pluralsight Design System

Carousel
CHANGELOG

Carousels are for displaying a related set of content items in a row. Items can be paged using the next/previous buttons or by a swipe gesture.

Install the component dependency:

Include a React component in your project:

PropTypes

Carousel PropTypes

Name
Value
Description
Default
children
Required
node[]
items to place in carousel
size
narrow | wide
size of carousel items
narrow

Carousel.Controls PropTypes

children
Required
node

Carousel.Control PropTypes

direction
Required
prev | next
(from Carousel.Control.directions)

Carousel.Item PropTypes

children
Required
node | () => node
render prop used to access item and page metadata

In-app example

The number and width of items are handled automatically.

Size

The size will adjust the min/max constraints of the individual items in the carousel.

Access to page and item metadata

If you need additional metadata about the carousel and its items you can get it with this one simple trick.

Guidelines

The height of the carousel adapts to the height of the content it contains, but the width of its children will be equalized, so make sure to use related content for children that are intended to be used at the same height and width.

Currently on page 1 of 7.

Use left and right arrow keys for navigation.

Do
  • Note

    If these lines aren't straight, your water's going to run right out of your painting and get your floor wet. At home you have unlimited time. See there, told you that would be easy. Decide where your cloud lives. Maybe he lives right in here.

    meta firstmeta second

Currently on page 1 of 6.

Use left and right arrow keys for navigation.

Don't
Open an issue