Skin CSS Framework

Main Navigation
CSS Components
Guides
  • Archive (v19.5.2)
  • Repo
  • Storybook
  • Sitemap
  • Accordion
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Calendar
  • Carousel
  • Ccd
  • Chart Legend
  • Checkbox
  • Chip
  • Chips Combobox
  • Combobox
  • Confirm Dialog
  • Cta Button
  • Date Textbox
  • Details
  • Donut Chart
  • Education Notice
  • Eek
  • Field
  • File Input
  • File Preview Card Group
  • File Preview Card
  • Filter Button
  • Filter Input
  • Filter Menu Button
  • Filter Menu
  • Flag
  • Floating Label
  • Global
  • Icon Button
  • Icon
  • Image Placeholder
  • Infotip
  • Inline Notice
  • Item Tile Group
  • Item Tile
  • Layout Grid
  • Less
  • Lightbox Dialog
  • Link
  • List
  • Listbox Button
  • Listbox
  • Marketsans
  • Menu Button
  • Menu
  • Number Input
  • Page Grid
  • Page Notice
  • Pagination
  • Panel Dialog
  • Phone Input
  • Progress Bar Expressive
  • Progress Bar
  • Progress Spinner
  • Progress Stepper
  • Radio
  • Section Notice
  • Section Title
  • Segmented Buttons
  • Select
  • Signal
  • Skeleton
  • Snackbar Dialog
  • Split Button
  • Star Rating Select
  • Star Rating
  • Svg
  • Switch
  • Table
  • Tabs
  • Textbox
  • Toast Dialog
  • Toggle Button Group
  • Toggle Button
  • Tokens
  • Tooltip
  • Tourtip
  • Typography
  • Utility
  • Page Grid Use Guide
  • Skeleton Use Guide
  • Animation Guide
  • Archive (v19.5.2)
  • Repo
  • Storybook

CSS Components

  • Accordion
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Calendar
  • Carousel
  • Ccd
  • Chart Legend
  • Checkbox
  • Chip
  • Chips Combobox
  • Combobox
  • Confirm Dialog
  • Cta Button
  • Date Textbox
  • Details
  • Donut Chart
  • Education Notice
  • Eek
  • Field
  • File Input
  • File Preview Card Group
  • File Preview Card
  • Filter Button
  • Filter Input
  • Filter Menu Button
  • Filter Menu
  • Flag
  • Floating Label
  • Global
  • Icon Button
  • Icon
  • Image Placeholder
  • Infotip
  • Inline Notice
  • Item Tile Group
  • Item Tile
  • Layout Grid
  • Less
  • Lightbox Dialog
  • Link
  • List
  • Listbox Button
  • Listbox
  • Marketsans
  • Menu Button
  • Menu
  • Number Input
  • Page Grid
  • Page Notice
  • Pagination
  • Panel Dialog
  • Phone Input
  • Progress Bar Expressive
  • Progress Bar
  • Progress Spinner
  • Progress Stepper
  • Radio
  • Section Notice
  • Section Title
  • Segmented Buttons
  • Select
  • Signal
  • Skeleton
  • Snackbar Dialog
  • Split Button
  • Star Rating Select
  • Star Rating
  • Svg
  • Switch
  • Table
  • Tabs
  • Textbox
  • Toast Dialog
  • Toggle Button Group
  • Toggle Button
  • Tokens
  • Tooltip
  • Tourtip
  • Typography
  • Utility

Guides

  • Page Grid Use Guide
  • Skeleton Use Guide
  • Animation Guide

@ebay/skin/carousel

DS v1.1

Carousels display a list of similar items in a scrolling, horizontal viewport. Items may be entirely static (e.g. an image), entirely interactive (e.g. button) or contain a mix of static and interactive elements (e.g. a heading, image and link).

Items may be ungrouped and scrolled in a continuous manner, or grouped and scrolled via a discrete number of slides .

NOTE: No JavaScript behaviour has been implemented in the carousel examples (i.e. the left & right paddle controls are non-functional), we demonstrate the CSS aspect only. For detailed behaviour requirements, please visit the eBay MIND Pattern for Carousel .

Continuous Carousel

The default carousel is a continuous carousel. Continuous carousels have no concept of slides, only a continuous flow of items.

Continuous carousels cannot guarantee any kind of "peek", therefore a faded mask is applied to the viewport as visual affordance. To disable the mask, when the carousel has reached the end of the content, simply remove the carousel__viewport--mask modifier.

  • Card 1
  • Card 2
  • Card 3
  • Card 4
  • Card 5
  • Card 6
  • Card 7
  • Card 8

Slide Carousel

A slide carousel has a discrete number of items in the viewport. Each group of items constitutes a "slide".

For visual affordance, instead of a faded mask, slide carousels are always able to show a "peek" of more content.

A slide carousel requires an ARIA live-region (typically also a heading) to convey slide updates to assistive technology.

Top Products - Slide 1 of 2

  • Card 1
  • Card 2
  • Card 3
  • Card 4
  • Card 5
  • Card 6
  • Card 7
  • Card 8

Slideshow Carousel

A slideshow carousel is a discrete carousel that shows exactly one item per slide; it requires no other visual affordance than a play/pause button.

A slideshow carousel can be set to autoplay, but must loop no more than once.

Top Products - Slide 1 of 4

  • Card 1
  • Card 2
  • Card 3
  • Card 4
  • Archive (v19.5.2)
  • Repo
  • Storybook
  • Sitemap
Copyright © 2025 eBay, Inc. All rights reserved.
<div class="carousel">
  <div class="carousel__container">
    <button
      class="carousel__control carousel__control--prev"
      aria-label="Previous Slide - Top Products"
    >
      <svg aria-hidden="true" class="icon icon--16">
        <use href="#icon-chevron-left-16" />
      </svg>
    </button>
    <div class="carousel__viewport carousel__viewport--mask">
      <ul class="carousel__list">
        <li>Card 1</li>
        <li>Card 2</li>
        <li>Card 3</li>
        <li>Card 4</li>
        <li>Card 5</li>
        <li>Card 6</li>
        <li>Card 7</li>
        <li>Card 8</li>
      </ul>
    </div>
    <button
      class="carousel__control carousel__control--next"
      aria-label="Next Slide - Top Products"
    >
      <svg aria-hidden="true" class="icon icon--16">
        <use href="#icon-chevron-right-16" />
      </svg>
    </button>
  </div>
</div>
<div class="carousel carousel--slides">
  <div class="carousel__container">
    <h2 class="clipped" aria-live="polite">
      <span> Top Products - Slide 1 of 2 </span>
    </h2>
    <button
      class="carousel__control carousel__control--prev"
      aria-label="Previous Slide - Top Products"
    >
      <svg aria-hidden="true" class="icon icon--16">
        <use href="#icon-chevron-left-16" />
      </svg>
    </button>
    <div class="carousel__viewport">
      <ul class="carousel__list">
        <li>Card 1</li>
        <li>Card 2</li>
        <li>Card 3</li>
        <li>Card 4</li>
        <li>Card 5</li>
        <li>Card 6</li>
        <li>Card 7</li>
        <li>Card 8</li>
      </ul>
    </div>
    <button
      class="carousel__control carousel__control--next"
      aria-label="Next Slide - Top Products"
    >
      <svg aria-hidden="true" class="icon icon--16">
        <use href="#icon-chevron-right-16" />
      </svg>
    </button>
  </div>
</div>
<div class="carousel carousel--slides">
  <div class="carousel__container">
    <h2 class="clipped" aria-live="polite">
      <span> Top Products - Slide 1 of 4 </span>
    </h2>
    <button
      class="carousel__control carousel__control--prev"
      aria-label="Previous Slide - Top Products"
    >
      <svg aria-hidden="true" class="icon icon--16">
        <use href="#icon-chevron-left-16" />
      </svg>
    </button>
    <div class="carousel__viewport">
      <ul class="carousel__list">
        <li>Card 1</li>
        <li>Card 2</li>
        <li>Card 3</li>
        <li>Card 4</li>
      </ul>
    </div>
    <button
      class="carousel__control carousel__control--next"
      aria-label="Next Slide - Top Products"
    >
      <svg aria-hidden="true" class="icon icon--16">
        <use href="#icon-chevron-right-16" />
      </svg>
    </button>
  </div>
  <button class="carousel__playback" aria-label="Play - Top Products">
    <svg class="icon icon--24" aria-hidden="true">
      <use href="#icon-play-24" />
    </svg>
  </button>
</div>