ba-carousel
Provides a horizontally scrollable content component that allows users to browse through a set of items one at a time.
GitHub
Storybook
Live Demo
Example heading 1
Example content
Example heading 2
Example content
Example heading 3
Example content
Example heading 4
Example content
Example heading 5
Example content
<ba-carousel>
<ba-card tag-text="tag text">
<ba-image
alt="Description of image"
src="ba-card-live-demo.jpg"
slot="media"
aspect-ratio="16-9"
></ba-image>
<ba-content>
<h4>Example heading 1</h4>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-card>
<ba-card tag-text="tag text">
<ba-image
alt="Description of image"
src="ba-card-live-demo.jpg"
slot="media"
aspect-ratio="16-9"
></ba-image>
<ba-content>
<h4>Example heading 2</h4>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-card>
<ba-card tag-text="tag text">
<ba-image
alt="Description of image"
src="ba-card-live-demo.jpg"
slot="media"
aspect-ratio="16-9"
></ba-image>
<ba-content>
<h4>Example heading 3</h4>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-card>
<ba-card tag-text="tag text">
<ba-image
alt="Description of image"
src="ba-card-live-demo.jpg"
slot="media"
aspect-ratio="16-9"
></ba-image>
<ba-content>
<h4>Example heading 4</h4>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-card>
<ba-card tag-text="tag text">
<ba-image
alt="Description of image"
src="ba-card-live-demo.jpg"
slot="media"
aspect-ratio="16-9"
></ba-image>
<ba-content>
<h4>Example heading 5</h4>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-card>
</ba-carousel>Guidelines
The carousel component should only be used when needing to show 3 or more items that benefit from horizontal scrolling instead of vertical.
If you only need to show 2 items use a standard layout patterns instead: stacked on mobile, side by side on desktop.
For 1 item, display as a standard content block with no navigation.
There is no limit to how many items can be shown on desktop as long as each item is no smaller than 264px. The default amount is 2 items.
Accessibility
Due to the carousel items being accessible via the keyboard, the controls to move forward and backward in the carousel have been removed from the tab flow. This makes the behaviour less confusing for screen reader users as it stops duplication.
This enables screen reader users to know how many items are in the carousel, and gives a running count of which item they are on when moving through the carousel.
Code
Properties and Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
desktopSlides |
desktop-slides |
The amount of slides to show on desktop. Defaults to 2 | number | undefined |
2 |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <ba‑card>, <ba‑card‑promo> |
Parent components
ba-carousel can be slotted into:
Permitted ARIA roles
None
Basic usage
<ba-carousel>
<ba-card tag-text="tag text">
<ba-image
alt="Description of image"
src="ba-card-live-demo.jpg"
slot="media"
aspect-ratio="16-9"
></ba-image>
<ba-content>
<h4>Example heading 1</h4>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-card>
<ba-card tag-text="tag text">
<ba-image
alt="Description of image"
src="ba-card-live-demo.jpg"
slot="media"
aspect-ratio="16-9"
></ba-image>
<ba-content>
<h4>Example heading 2</h4>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-card>
<ba-card tag-text="tag text">
<ba-image
alt="Description of image"
src="ba-card-live-demo.jpg"
slot="media"
aspect-ratio="16-9"
></ba-image>
<ba-content>
<h4>Example heading 3</h4>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-card>
<ba-card tag-text="tag text">
<ba-image
alt="Description of image"
src="ba-card-live-demo.jpg"
slot="media"
aspect-ratio="16-9"
></ba-image>
<ba-content>
<h4>Example heading 4</h4>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-card>
<ba-card tag-text="tag text">
<ba-image
alt="Description of image"
src="ba-card-live-demo.jpg"
slot="media"
aspect-ratio="16-9"
></ba-image>
<ba-content>
<h4>Example heading 5</h4>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-card>
</ba-carousel>
Setting the number of visible items on desktop
The number of items can be set on desktop using the desktop-slides prop
<ba-carousel desktop-slides="3">
<ba-card tag-text="tag text">
<ba-image
alt="Description of image"
src="ba-card-live-demo.jpg"
slot="media"
aspect-ratio="16-9"
></ba-image>
<ba-content>
<h4>Example heading 1</h4>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-card>
<ba-card tag-text="tag text">
<ba-image
alt="Description of image"
src="ba-card-live-demo.jpg"
slot="media"
aspect-ratio="16-9"
></ba-image>
<ba-content>
<h4>Example heading 2</h4>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-card>
<ba-card tag-text="tag text">
<ba-image
alt="Description of image"
src="ba-card-live-demo.jpg"
slot="media"
aspect-ratio="16-9"
></ba-image>
<ba-content>
<h4>Example heading 3</h4>
<p>Example content</p>
</ba-content>
<ba-link href="/link" slot="action">Action</ba-link>
</ba-card>
</ba-carousel>