Carousel Component

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.

<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>

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.

<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>

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.

<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>