Card carousel

Usage

The card carousel component displays four or more related cards within a limited space, allowing users to scroll through them via arrows, navigation buttons, or swiping gestures on a touchscreen.

Use a card carousel component:

• when you have limited screen space but need to display multiple cards with related content.
• with a clear and relevant title, to help users understand the content or purpose better.
• to display feature articles, blog posts, news updates or any sequential content, allowing users to browse through the latest updates easily.

When to avoid

It's essential to implement card carousels thoughtfully to ensure they genuinely enhance user experience.

Do not:

• use multiple card carousels on one page. Use carousels sparingly and strategically. Overuse can lead to user frustration.
• use for unrelated items. The content in the carousel should be related in some way. This helps users to find related and relevant content.
• mix different types of cards. Consistency helps users anticipate the content and interactions.
• overwhelm users with too many cards in the carousel. Ideally, limit the number of cards to no more than 9 to prevent information overload.
• use if your cards contain important information, as users may overlook it if they do not engage with the carousel.

Ensure that the content displayed in the carousel is relevant, engaging, and adds value to the user experience.

How this component works

Options

You can edit the following data attributes to customize the carousel behavior:

• drag: to disable drag on touch devices, add a data-drag="off" to the js-carousel element (default is on);
• infinite loop: to enable infinite loop, add a data-loop="on" to the js-carousel element (default is off);
• carousel navigation: to disable the carousel dots navigation, add a data-navigation="off" (default is on); this option is only available when not using data-loop="on".

Carousel Item Number

The number of items visible in a carousel cycle is determined based on the width of the .nsw-carousel__item as defined in the card-carousel.scss file. To modify this value, you can change the --carousel-item-auto-size CSS variable (default is 300px).

Carousel Dots Navigation

You can customize the carousel navigation using the following data attributes:

• data-navigation-class: pass a list of custom classes to be added to the navigation element (default is nsw-carousel__navigation);
• data-navigation-item-class: pass a custom class for the navigation list items (default is nsw-carousel__nav-item). When an item is selected, the class {navigation-item-class}--selected is added to that element (e.g., if data-navigation-item-class='nsw-carousel__navigation-item', the selected class will be nsw-carousel__navigation-item--selected);
• data-navigation-pagination: set it to 'on' to use the carousel navigation as a pagination element.

Center Items

If the carousel items number is smaller than the number of visible items, and you want them to be centered in the viewport, add a data-justify-content="on" to the .nsw-carousel item. By default items will be aligned to the left.

Optional title

You can include a heading using an <h2> within a separate title container alongside the carousel navigation. Only <h2> is supported. When present, this heading will align to the left and the carousel navigation controls will be pushed to the right. This provides a clear label for the carousel content and improves accessibility.

The title is optional. If no heading is provided, the navigation controls remain grouped on the right.

Optional 'view more' link

Including a 'view more' link below the card carousel can be useful for guiding users to additional related content beyond what is displayed in the carousel.

Research shows that users often look for clear pathways to explore more information, especially when the carousel content is a subset of a larger collection. A well-placed 'view more' link can improve user engagement by providing a straightforward way to access further resources.

Use a 'view more' link when:

• there is a larger set of related content not fully displayed in the carousel;
• you want to encourage users to explore more deeply on a related topic or category;
• you have a dedicated landing page or section that expands on the carousel content.

Avoid using a 'view more' link if:

• the carousel already shows the full set of items and there is no additional content beyond what's displayed;
• the link would lead to unrelated or confusing destinations.

Link text guidelines

• Use clear and descriptive link text that indicates what users will find by clicking.
• Avoid generic phrases like 'click here' or 'more' without context.
• Examples of good link text include 'View all articles on [topic]', 'See more news updates', or 'Explore related blog posts.'
• Keep link text concise but meaningful to assist screen reader users and improve accessibility.

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

The card carousel conforms to the WAI-ARIA Authoring Practices: Carousel pattern and includes a WAI-ARIA 1.2: Live region definition that allows screen readers to read content whenever carousel slides change.

Keyboard Interactions and focus

• Tab key moves focus through interactive elements in the carousel. Rotation control, previous slide, and next slide buttons precede the slide content in the Tab sequence.
• Shift + Tab keys moves focus to the previous focusable element
• Enter , Left Arrow and Right Arrow keys display next or previous slide in the carousel.

Screen Reader Announcement of Slide Changes

The card carousel slide content is included in a live region. This makes it easier for screen reader users to scan through the carousel slides. When screen reader users activate the next or previous slide button, the new slide content is announced, giving users immediate feedback that helps them determine whether or not to interact with the content.

ARIA attributes

• The card carousel container has the role property set to ARIA role: group with the property aria-roledescription set to 'carousel'.
• Each card container has role ARIA role: group with the property aria-roledescription set to slide.
• The next slide control, and previous slide control are native button elements.