Skip to main contenteBay Playbook

Carousel

v2.0

Carousels group similar items into a horizontally scrollable container extending beyond the visible space of the screen.

  • CSS
  • Marko
  • React
Stylized graphic of a carousel.

Considerations

Consumable

Carousels allow for a list of multiple complex items to be presented in a more consumable format.

Compact

Carousels condense a large list of items into a scrollable container with a smaller vertical footprint.

Consistent

Carousels react consistently and expectedly across all platforms.

Anatomy

Anatomy of a carousel. Number 1 points to the title. Number 2 points to the main content. Number 3 points to the link button. Number 4 points to the pagination controls.
  1. Title
  2. Content
  3. Link button
  4. Pagination controls

Properties

Title

The title explains why these items are grouped together so users know what they’re browsing before they scroll.

  • Use sentence case
  • No ending punctuation
  • Keep to one line
A small screen carousel of shoes with the title “Recently viewed items”.

Link button

The link button leads to a page with more items from the collection.

"See all" is the default text and works when the carousel title already establishes context. For less obvious destinations, use a more specific label (e.g., Shop running shoes).

Learn more about writing for link buttons.

A small screen carousel of shoes with a pointer pointing at the link button “See all”.

Controls

Pagination controls are always visible on x-large screens. Smaller screens reveal the pagination controls on hover and focus.

A small screen carousel with a cursor that triggers the pagination controls and a large screen carousel with the pagination controls always present.

Behavior

Title

If titles extend beyond the container width, titles will wrap to another line.

The text link is anchored to the baseline of the title.

A carousel title that wraps to two lines. The “See all” link is aligned with the baseline of the second line in the title.

Screen sizes

Small

Carousels on small screens don’t have visible controls. Users navigate carousels by using a leftward or rightward swiping gesture. Keyboard and voiceover users tab through the carousel content.

A small screen carousel for recently viewed items.

Small item tile count

Small screens have 1.5–2.5 tiles from 375px to 511px.

Two small screen carousels. The first is 375px with 1.5 tiles. The second is 511px with 2.5 tiles.

Medium

Carousels on medium screens reveal controls when hovering over the bounds of the carousel.

A medium screen carousel for recently viewed items. A cursor hovers over the carousel and reveals the pagination controls.

Medium item tile count

Medium screens have 2.5 tiles at 512px, 3.5 tiles at 768px, and 4.5 tiles at 1024px.

Three small screen carousels. The first is 512px with 2.5 tiles. The second is 768px with 3.5 tiles. The third is 1024px with 4.5 tiles.

Large

Carousels on large screens will have controls visible on hover. The content can be moved via the controls or by scrolling over the content. Touch-enabled devices can also use swipe gestures.

A large screen carousel for recently viewed items. A cursor hovers over the carousel and reveals the pagination controls.

Large item tile count

Large screens have 4.5 tiles at 1280px and 4.5 tiles at 1440px.

Two large screen carousels. The first is 1280px with 4.5 tiles. The second is 1440px with 4.5 tiles.

X-large

Carousels on x-large screens will have the controls visible at all times. The content can be moved via the controls or by scrolling over the content. Touch-enabled devices can also use swipe gestures.

An x-large screen carousel for recently viewed items. Pagination controls are visible without a cursor hover.

X-large item tile count

X-large screens have 5 tiles at 1680px and above and have no visual cut on the right side.

Two x-large screen carousels. The first is 1680px with 5 tiles. The second is 1920px with 5 tiles.

Best practices

Stacking

Do include a title on each carousel.

Two carousels stacked on a mobile screen. Each carousel has a title.

Don’t stack carousels under a single title.

Two carousels stacked on a mobile screen. Only the top has a title.

Specs

Specs for a small screen carousel. There is 16px between the title and content, 8px between item tiles, and 12px between item tile images and pricing.

Small screen

Specs for a medium, large, and x-large screen carousels. There is 24px between the title and content, 16px between item tiles, and 12px between item tile images and pricing. The pagination controls are 32px tall and vertically aligned with the image.

Medium, large, and x-large screen. Controls are vertically centered on the image only.