Carousel
Overview
The carousel is used to display a set of images or content in an organised and easily navigable manner.
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.
Example Usage
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.
HTML
<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>
Tight Carousel
Applying the carousel-tight class will remove the gap between the items.
HTML
<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.
HTML
<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.
HTML
<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.
HTML
<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.
HTML
<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.
Title
Title
Title
Title
Title
Title
HTML
<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>
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
Title
Title
Title
Title
Title
Title
HTML
<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.
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
HTML
<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.
HTML
<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>
CSS 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/