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
CHANGELOG
Install
npm install @pluralsight/ps-design-system-carousel
Import
import Carousel from '@pluralsight/ps-design-system-carousel'

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