Carousel

The carousel is used to display a set of images or content in a neat way.

These carousels have can be scrolled by holding SHIFT and scrolling the mouse wheel, vertically scrolling with a track pad, setting the focus on the carousel by clicking it or navigating to it using keyboard navigation and using the arrow keys to navigate through the carousel.

Accessibility & UX

Related components

For the best user experience, and best accessibility it is recommended to implement buttons to control the carousel. For these purposes, Control Buttons or Pips

Basic Carousel

The basic html structure of the carousel is seen below, applying the base styles without providing any more complex behaviour such as scroll snapping.

Preview Code

Copy

<div
  class="carousel-wrapper"
  role="region"
  aria-label="Image carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel" aria-atomic="false" aria-live="off">
    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image w-[400px]"
        src="https://picsum.photos/id/400/300/300"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

<div
  class="carousel-wrapper"
  role="region"
  aria-label="Image carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel" aria-atomic="false" aria-live="off">
    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image w-[400px]"
        src="https://picsum.photos/id/400/300/300"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

Alternate Layout : Tight

Applying the carousel-tight class will remove the gap between the items.

Preview Code

Copy

<div
  class="carousel-wrapper carousel-tight"
  role="region"
  aria-label="Image carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel">
    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

<div
  class="carousel-wrapper carousel-tight"
  role="region"
  aria-label="Image carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel">
    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

Snapping Styles

A number of snapping styles have been provided, giving you the option for how you would like the carousel to behave. It is recommended to choose one of these, as it will improve the keyboard navigation within your carousel as users can quickly navigate through the items.

Start Snap

The carousel-snap-start class will snap the items to the left edge of the carousel.

Preview Code

Copy

<div
  class="carousel-wrapper carousel-snap-start"
  role="region"
  aria-label="Image carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel">
    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

<div
  class="carousel-wrapper carousel-snap-start"
  role="region"
  aria-label="Image carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel">
    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

End Snap

The carousel-snap-end class will snap the items to the right edge of the carousel.

Preview Code

Copy

<div
  class="carousel-wrapper carousel-snap-end"
  role="region"
  aria-label="Image carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel">
    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

<div
  class="carousel-wrapper carousel-snap-end"
  role="region"
  aria-label="Image carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel">
    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

Center Snap

The carousel-snap-center class will snap the items to the middle of the carousel.

Preview Code

Copy

<div
  class="carousel-wrapper carousel-snap-center"
  role="region"
  aria-label="Image carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel">
    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

<div
  class="carousel-wrapper carousel-snap-center"
  role="region"
  aria-label="Image carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel">
    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

Snap Alignment

By adding the carousel-align class, additional padding is added to the carousel such that all items will follow the snapping style.

Preview Code

Copy

<div
  class="carousel-wrapper carousel-snap-center carousel-align"
  role="region"
  aria-label="Image carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel">
    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

<div
  class="carousel-wrapper carousel-snap-center carousel-align"
  role="region"
  aria-label="Image carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel">
    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

Carousel Content

Content can be added as well as images, and should be placed within a div with the class carousel-content applied.

Preview Code

Copy

Title

Description

Title

Description

Title

Description

Title

Description

Title

Description

Title

Description

<div
  class="carousel-wrapper carousel-snap-start"
  role="region"
  aria-label="Product carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel">
    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-1 desc-1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-1" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-1" class="text-body" aria-hidden="true">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-2 desc-2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-2" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-2" class="text-body" aria-hidden="true">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-3 desc-3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-3" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-3" class="text-body" aria-hidden="true">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-4 desc-4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-4" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-4" class="text-body" aria-hidden="true">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-5 desc-5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-5" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-5" class="text-body" aria-hidden="true">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-6 desc-6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-6" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-6" class="text-body" aria-hidden="true">Description</p>
      </div>
    </div>
  </div>
</div>

<div
  class="carousel-wrapper carousel-snap-start"
  role="region"
  aria-label="Product carousel"
  tabindex="0"
  aria-roledescription="carousel"
>
  <div class="carousel">
    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-1 desc-1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-1" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-1" class="text-body" aria-hidden="true">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-2 desc-2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-2" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-2" class="text-body" aria-hidden="true">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-3 desc-3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-3" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-3" class="text-body" aria-hidden="true">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-4 desc-4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-4" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-4" class="text-body" aria-hidden="true">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-5 desc-5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-5" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-5" class="text-body" aria-hidden="true">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-6 desc-6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-6" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-6" class="text-body" aria-hidden="true">Description</p>
      </div>
    </div>
  </div>
</div>

Caution

If the content of the carousels includes elements that are interactive such as buttons, then this will mean that a keyboard user will have to navigate through all of the items in the carousel to get to the next section of the site.

Tab index of -1 are provided for the items, and a tab index of -2 should be applied to all interactive elements within them.

Javascript will be required in order to manage focus. This should implement the following behaviour:

• Users can navigate to the carousel wrapper
• Pressing ENTER on the carousel wrapper should trap focus into the carousel
• Tab and Shift Tab should navigate through the items
• The escape key should bring focus out of the items, and back to the carousel wrapper

If the user is on a item within the carousel, they should be able to:

• A user can press enter to trap their focus on the item
• The user should be able to navigate through any interactive elements for the item
• Pressing the escape key should bring their focus out of the item, and back to the carousel

Preview Code

Copy

Title

Description

CTA

Title

Description

CTA

Title

Description

CTA

Title

Description

CTA

Title

Description

CTA

Title

Description

CTA

<div
  class="carousel-wrapper carousel-snap-start"
  role="region"
  aria-label="Product carousel"
  aria-roledescription="carousel"
  tabindex="0"
>
  <div class="carousel">
    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-1 desc-1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-1" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-1" class="text-body" aria-hidden="true">Description</p>
        <button tabindex="-2" class="btn skin-primary-emphasised interactive">
          CTA
        </button>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-2 desc-2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-2" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-2" class="text-body" aria-hidden="true">Description</p>
        <button tabindex="-2" class="btn skin-primary-emphasised interactive">
          CTA
        </button>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-3 desc-3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-3" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-3" class="text-body" aria-hidden="true">Description</p>
        <button tabindex="-2" class="btn skin-primary-emphasised interactive">
          CTA
        </button>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-4 desc-4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-4" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-4" class="text-body" aria-hidden="true">Description</p>
        <button tabindex="-2" class="btn skin-primary-emphasised interactive">
          CTA
        </button>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-5 desc-5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-5" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-5" class="text-body" aria-hidden="true">Description</p>
        <button tabindex="-2" class="btn skin-primary-emphasised interactive">
          CTA
        </button>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-6 desc-6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-6" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-6" class="text-body" aria-hidden="true">Description</p>
        <button tabindex="-2" class="btn skin-primary-emphasised interactive">
          CTA
        </button>
      </div>
    </div>
  </div>
</div>

<div
  class="carousel-wrapper carousel-snap-start"
  role="region"
  aria-label="Product carousel"
  aria-roledescription="carousel"
  tabindex="0"
>
  <div class="carousel">
    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-1 desc-1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-1" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-1" class="text-body" aria-hidden="true">Description</p>
        <button tabindex="-2" class="btn skin-primary-emphasised interactive">
          CTA
        </button>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-2 desc-2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/301/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-2" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-2" class="text-body" aria-hidden="true">Description</p>
        <button tabindex="-2" class="btn skin-primary-emphasised interactive">
          CTA
        </button>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-3 desc-3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/302/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-3" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-3" class="text-body" aria-hidden="true">Description</p>
        <button tabindex="-2" class="btn skin-primary-emphasised interactive">
          CTA
        </button>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-4 desc-4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/306/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-4" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-4" class="text-body" aria-hidden="true">Description</p>
        <button tabindex="-2" class="btn skin-primary-emphasised interactive">
          CTA
        </button>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-5 desc-5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/304/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-5" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-5" class="text-body" aria-hidden="true">Description</p>
        <button tabindex="-2" class="btn skin-primary-emphasised interactive">
          CTA
        </button>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-labelledby="title-6 desc-6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/305/300/300"
        alt=""
        aria-hidden="true"
      />
      <div class="carousel-content">
        <h3 id="title-6" class="text-lg font-semi-bold" aria-hidden="true">
          Title
        </h3>
        <p id="desc-6" class="text-body" aria-hidden="true">Description</p>
        <button tabindex="-2" class="btn skin-primary-emphasised interactive">
          CTA
        </button>
      </div>
    </div>
  </div>
</div>

Banner Carousel

By adding the carousel-banner class, the items will become full width, with the content and image placed next to each other.

Preview Code

Copy

Title

Description

Title

Description

Title

Description

Title

Description

Title

Description

Title

Description

<div
  class="carousel-wrapper carousel-banner"
  role="region"
  aria-label="Banner carousel"
  tabindex="0"
>
  <div class="carousel">
    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/600/600"
        alt="Image for Title 1"
      />
      <div class="carousel-content">
        <h3 class="text-lg font-semi-bold">Title</h3>
        <p class="text-bodyy">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/401/600/600"
        alt="Image for Title 2"
      />
      <div class="carousel-content">
        <h3 class="text-lg font-semi-bold">Title</h3>
        <p class="text-bodyy">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/402/600/600"
        alt="Image for Title 3"
      />
      <div class="carousel-content">
        <h3 class="text-lg font-semi-bold">Title</h3>
        <p class="text-bodyy">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/406/600/600"
        alt="Image for Title 4"
      />
      <div class="carousel-content">
        <h3 class="text-lg font-semi-bold">Title</h3>
        <p class="text-bodyy">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/404/600/600"
        alt="Image for Title 5"
      />
      <div class="carousel-content">
        <h3 class="text-lg font-semi-bold">Title</h3>
        <p class="text-bodyy">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/405/600/600"
        alt="Image for Title 6"
      />
      <div class="carousel-content">
        <h3 class="text-lg font-semi-bold">Title</h3>
        <p class="text-bodyy">Description</p>
      </div>
    </div>
  </div>
</div>

<div
  class="carousel-wrapper carousel-banner"
  role="region"
  aria-label="Banner carousel"
  tabindex="0"
>
  <div class="carousel">
    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/600/600"
        alt="Image for Title 1"
      />
      <div class="carousel-content">
        <h3 class="text-lg font-semi-bold">Title</h3>
        <p class="text-bodyy">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/401/600/600"
        alt="Image for Title 2"
      />
      <div class="carousel-content">
        <h3 class="text-lg font-semi-bold">Title</h3>
        <p class="text-bodyy">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/402/600/600"
        alt="Image for Title 3"
      />
      <div class="carousel-content">
        <h3 class="text-lg font-semi-bold">Title</h3>
        <p class="text-bodyy">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/406/600/600"
        alt="Image for Title 4"
      />
      <div class="carousel-content">
        <h3 class="text-lg font-semi-bold">Title</h3>
        <p class="text-bodyy">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/404/600/600"
        alt="Image for Title 5"
      />
      <div class="carousel-content">
        <h3 class="text-lg font-semi-bold">Title</h3>
        <p class="text-bodyy">Description</p>
      </div>
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/405/600/600"
        alt="Image for Title 6"
      />
      <div class="carousel-content">
        <h3 class="text-lg font-semi-bold">Title</h3>
        <p class="text-bodyy">Description</p>
      </div>
    </div>
  </div>
</div>

If a carousel item contains only one child, it will be full width regardless of the banner image width variable.

Preview Code

Copy

<div
  class="carousel-wrapper carousel-banner"
  role="region"
  aria-label="Banner carousel"
  tabindex="0"
>
  <div class="carousel">
    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/600/600"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/401/600/600"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/402/600/600"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/406/600/600"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/404/600/600"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/405/600/600"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

<div
  class="carousel-wrapper carousel-banner"
  role="region"
  aria-label="Banner carousel"
  tabindex="0"
>
  <div class="carousel">
    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="1 of 6: Title 1 - Description for item 1"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/400/600/600"
        alt="Image for Title 1"
      />
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="2 of 6: Title 2 - Description for item 2"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/401/600/600"
        alt="Image for Title 2"
      />
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="3 of 6: Title 3 - Description for item 3"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/402/600/600"
        alt="Image for Title 3"
      />
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="4 of 6: Title 4 - Description for item 4"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/406/600/600"
        alt="Image for Title 4"
      />
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="5 of 6: Title 5 - Description for item 5"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/404/600/600"
        alt="Image for Title 5"
      />
    </div>

    <div
      class="carousel-item skin-card"
      role="group"
      aria-roledescription="slide"
      tabindex="-1"
      aria-label="6 of 6: Title 6 - Description for item 6"
    >
      <img
        class="carousel-image"
        src="https://picsum.photos/id/405/600/600"
        alt="Image for Title 6"
      />
    </div>
  </div>
</div>

Variables

The carousel can be customized with the following variables:

Layout Variables

Variable	Default Value	Description
--carousel-item-gap	1rem	Gap between carousel items
--carousel-content-padding	0rem	Padding around content
--carousel-image-height	300px	Height of carousel images
--carousel-item-width	300px	Width of carousel items
--carousel-banner-image-width	50%	Width of banner images
--carousel-banner-image-height	400px	Height of banner images
--carousel-banner-image-height-mobile	300px	Height of banner images on mobile

Visual Effects Variables

Variable	Default Value	Description
--carousel-radius	var(--radius-site)	Border radius for carousel items
--carousel-animation-speed	var(--duration-speed-default)	Speed of animations

Focus Variables

Variable	Default Value	Description
--carousel-focus-width	2px	Width of the focus outline
--carousel-focus-offset	2px	Offset distance of the focus outline

Accessibility

• Include control buttons for all carousels
• Keep screen aria labels updated to match current content.
• Trap focus when interactive elements are used within the carousel items.

See the W3 ARIA carousel documentation for more information

Further reading

Carousel Pattern on W3C Web Accessibility Initiative https://www.w3.org/WAI/ARIA/apg/patterns/carousel/

W3.org carousel tutorial https://www.w3.org/WAI/tutorials/carousels/

CSS Only Carousel CSS-Tricks https://css-tricks.com/css-only-carousel/