Carousel

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.

Examples

Auto paging

The number and width of items are handled automatically.

  • Vue.js Fundamentals
    Jim CooperIntermediate

Currently on page 1 of 18.

Use left and right arrow keys for navigation.

import Card from '@pluralsight/ps-design-system-card'
import Carousel from '@pluralsight/ps-design-system-carousel'
import React from 'react'
function Example() {
return (
<Carousel>
{MOCK_DATA.courses.map(course => (
<Card
key={course.id}
image={<Card.Image src="https://picsum.photos/seed/picsum/540/360" />}
metadata1={[course.author, course.level]}
progress={randomInt()}
title={<Card.Title>{course.title}</Card.Title>}
/>
))}
</Carousel>
)
}
export default Example
const randomInt = (max = 100) => Math.floor(Math.random() * Math.floor(max))
const MOCK_DATA = {
courses: [
{
author: 'Jim Cooper',
id: '1',
level: 'Intermediate',
title: 'Vue.js Fundamentals'
},
{
author: 'Mark Heath',
id: '2',
level: 'Intermediate',
title: 'Azure Functions Fundamentals'
},
{
author: 'Kyle Simpson',
id: '3',
level: 'Advanced',
title: 'Advanced JavaScript'
},
{
author: 'Mark Zamoyta',
id: '4',
level: 'Advanced',
title: 'Rapid JavaScript Training'
},
{
author: 'Dan Wahlin',
id: '5',
level: 'Advanced',
title: 'Structuring JavaScript Code'
},
{
author: 'Jim Cooper',
id: '6',
level: 'Advanced',
title: 'JavaScript Objects and PropTypes'
},
{
author: 'Jim Cooper',
id: '11',
level: 'Intermediate',
title: 'Vue.js Fundamentals'
},
{
author: 'Mark Heath',
id: '12',
level: 'Intermediate',
title: 'Azure Functions Fundamentals'
},
{
author: 'Kyle Simpson',
id: '13',
level: 'Advanced',
title: 'Advanced JavaScript'
},
{
author: 'Mark Zamoyta',
id: '14',
level: 'Advanced',
title: 'Rapid JavaScript Training'
},
{
author: 'Dan Wahlin',
id: '15',
level: 'Advanced',
title: 'Structuring JavaScript Code'
},
{
author: 'Jim Cooper',
id: '16',
level: 'Advanced',
title: 'JavaScript Objects and PropTypes'
},
{
author: 'Jim Cooper',
id: '21',
level: 'Intermediate',
title: 'Vue.js Fundamentals'
},
{
author: 'Mark Heath',
id: '22',
level: 'Intermediate',
title: 'Azure Functions Fundamentals'
},
{
author: 'Kyle Simpson',
id: '23',
level: 'Advanced',
title: 'Advanced JavaScript'
},
{
author: 'Mark Zamoyta',
id: '24',
level: 'Advanced',
title: 'Rapid JavaScript Training'
},
{
author: 'Dan Wahlin',
id: '25',
level: 'Advanced',
title: 'Structuring JavaScript Code'
},
{
author: 'Jim Cooper',
id: '26',
level: 'Advanced',
title: 'JavaScript Objects and PropTypes'
}
]
}

Using portals

If there are any UI elements that need to appear in the same visual space as the carousel container, they will need to be rendered outside the Carousel DOM. This is because the Carousel container solution requires being styled overflow: hidden. A React Portal is a great solution. A common example could be an ActionMenu rendered from a Card. Here is some example code:

  • Vue.js Fundamentals
    Jim CooperIntermediate

Currently on page 1 of 18.

Use left and right arrow keys for navigation.

import ActionMenu from '@pluralsight/ps-design-system-actionmenu'
import { BelowRight } from '@pluralsight/ps-design-system-position'
import Card from '@pluralsight/ps-design-system-card'
import Carousel from '@pluralsight/ps-design-system-carousel'
import { MoreIcon } from '@pluralsight/ps-design-system-icon'
import React from 'react'
function Example() {
return (
<Carousel size={Carousel.sizes.wide}>
{MOCK_DATA.courses.map(course => (
<Toggle>
{({ active, toggle }) => (
<Card
key={course.id}
image={<Card.Image src={course.image} />}
metadata1={[course.author, course.level]}
title={<Card.Title>{course.title}</Card.Title>}
actionBarVisible
actionBar={[
<BelowRight
inNode={typeof document !== 'undefined' && document.body}
when={active}
show={
<ActionMenu onClick={toggle}>
<ActionMenu.Item>Useless item</ActionMenu.Item>
<ActionMenu.Item>Useless item</ActionMenu.Item>
<ActionMenu.Item>Useless item</ActionMenu.Item>
<ActionMenu.Item>Useless item</ActionMenu.Item>
<ActionMenu.Item>Useless item</ActionMenu.Item>
<ActionMenu.Item>Useless item</ActionMenu.Item>
<ActionMenu.Item>Useless item</ActionMenu.Item>
<ActionMenu.Item>Useless item</ActionMenu.Item>
</ActionMenu>
}
key="a"
>
<Card.Action
title="See more"
icon={<MoreIcon />}
onClick={toggle}
/>
</BelowRight>
]}
/>
)}
</Toggle>
))}
</Carousel>
)
}
export default Example
function Toggle(props) {
const [active, setActive] = React.useState(
typeof props.active === 'undefined' ? !!props.startActive : !!props.active
)
function toggle() {
setActive(!active)
}
return props.children({ active, toggle })
}
const MOCK_DATA = {
courses: [
{
author: 'Jim Cooper',
id: '1',
level: 'Intermediate',
title: 'Vue.js Fundamentals'
},
{
author: 'Mark Heath',
id: '2',
level: 'Intermediate',
title: 'Azure Functions Fundamentals'
},
{
author: 'Kyle Simpson',
id: '3',
level: 'Advanced',
title: 'Advanced JavaScript'
},
{
author: 'Mark Zamoyta',
id: '4',
level: 'Advanced',
title: 'Rapid JavaScript Training'
},
{
author: 'Dan Wahlin',
id: '5',
level: 'Advanced',
title: 'Structuring JavaScript Code'
},
{
author: 'Jim Cooper',
id: '6',
level: 'Advanced',
title: 'JavaScript Objects and PropTypes'
},
{
author: 'Jim Cooper',
id: '11',
level: 'Intermediate',
title: 'Vue.js Fundamentals'
},
{
author: 'Mark Heath',
id: '12',
level: 'Intermediate',
title: 'Azure Functions Fundamentals'
},
{
author: 'Kyle Simpson',
id: '13',
level: 'Advanced',
title: 'Advanced JavaScript'
},
{
author: 'Mark Zamoyta',
id: '14',
level: 'Advanced',
title: 'Rapid JavaScript Training'
},
{
author: 'Dan Wahlin',
id: '15',
level: 'Advanced',
title: 'Structuring JavaScript Code'
},
{
author: 'Jim Cooper',
id: '16',
level: 'Advanced',
title: 'JavaScript Objects and PropTypes'
},
{
author: 'Jim Cooper',
id: '21',
level: 'Intermediate',
title: 'Vue.js Fundamentals'
},
{
author: 'Mark Heath',
id: '22',
level: 'Intermediate',
title: 'Azure Functions Fundamentals'
},
{
author: 'Kyle Simpson',
id: '23',
level: 'Advanced',
title: 'Advanced JavaScript'
},
{
author: 'Mark Zamoyta',
id: '24',
level: 'Advanced',
title: 'Rapid JavaScript Training'
},
{
author: 'Dan Wahlin',
id: '25',
level: 'Advanced',
title: 'Structuring JavaScript Code'
},
{
author: 'Jim Cooper',
id: '26',
level: 'Advanced',
title: 'JavaScript Objects and PropTypes'
}
]
}

Size

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

  • Vue.js Fundamentals
    Jim CooperIntermediate

Currently on page 1 of 2.

Use left and right arrow keys for navigation.


  • Vue.js Fundamentals
    Jim CooperIntermediate

Currently on page 1 of 2.

Use left and right arrow keys for navigation.

import Card from '@pluralsight/ps-design-system-card'
import Carousel from '@pluralsight/ps-design-system-carousel'
import React from 'react'
function Example() {
return (
<>
<Carousel size={Carousel.sizes.narrow}>
{MOCK_DATA.courses.map(course => (
<Card
key={course.id}
image={
<Card.Image src="https://picsum.photos/seed/picsum/540/360" />
}
metadata1={[course.author, course.level]}
progress={randomInt()}
title={<Card.Title>{course.title}</Card.Title>}
/>
))}
</Carousel>
<br />
<Carousel size={Carousel.sizes.wide}>
{MOCK_DATA.courses.map(course => (
<Card
key={course.id}
image={
<Card.Image src="https://picsum.photos/seed/picsum/540/360" />
}
metadata1={[course.author, course.level]}
progress={randomInt()}
title={<Card.Title>{course.title}</Card.Title>}
/>
))}
</Carousel>
</>
)
}
export default Example
const randomInt = (max = 100) => Math.floor(Math.random() * Math.floor(max))
const MOCK_DATA = {
courses: [
{
author: 'Jim Cooper',
id: '1',
level: 'Intermediate',
title: 'Vue.js Fundamentals'
},
{
author: 'Mark Heath',
id: '2',
level: 'Intermediate',
title: 'Azure Functions Fundamentals'
}
]
}

Access to page and item metadata

Access to page and item metadata

  • {
      "isActivePage": true,
      "itemIndex": 0,
      "itemsPerPage": 1,
      "pageCount": 9,
      "pageIndex": 0
    }

Currently on page 1 of 9.

Use left and right arrow keys for navigation.

import Card from '@pluralsight/ps-design-system-card'
import Carousel from '@pluralsight/ps-design-system-carousel'
import { P } from '@pluralsight/ps-design-system-text'
import React from 'react'
function Example() {
return (
<Carousel size={Carousel.sizes.wide}>
{new Array(9).fill(null).map((_, index) => (
<Carousel.Item key={index}>
{data => (
<div>
<P>
<pre>{JSON.stringify(data, null, 2)}</pre>
</P>
</div>
)}
</Carousel.Item>
))}
</Carousel>
)
}
export default Example

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

Currently on page 1 of 3.

Use left and right arrow keys for navigation.

Don't

Usage & types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-carousel
  • Import
    import Carousel from '@pluralsight/ps-design-system-carousel'
Name
Type
Description
Default
children
Required
React.ReactNode
items to place in carousel
size
narrow | wide
size of carousel items
medium

Carousel.Controls

Name
Type
Description
Default
children
Required
React.ReactNode
controls to advance carousel frames

Carousel.Control

Name
Type
Description
Default
direction
Required
prev | next
(from Carousel.Control.directions)

Carousel.Item

Name
Type
Description
Default
children
Required
React.ReactNode | () => React.ReactNode
render prop used to access item and page metadata