A card carousel displays multiple related cards horizontally, allowing users to swipe or navigate through the content.
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:
It's essential to implement card carousels thoughtfully to ensure they genuinely enhance user experience.
Do not:
Ensure that the content displayed in the carousel is relevant, engaging, and adds value to the user experience.
You can edit the following data attributes to customize the carousel behavior:
data-drag="off"
to the js-carousel
element (default is on);data-loop="on"
to the js-carousel
element (default is off);data-navigation="off"
(default is on); this option is only available when not using data-loop="on"
.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).
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.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.
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 W3C Carousel Design Pattern and includes a Live Region that allows screen readers to read content whenever carousel slides change.
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 elementEnter
, Left Arrow
and Right Arrow
keys display next or previous slide in the carousel.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.
The card carousel component is best viewed in new window.
Carousel items
The annual awards will recognise individuals and organisations for their leadership , commitment and innovation in sustainability across NSW.
The NSW Government will create more quality green spaces and increase ther tree canopy in Sydney bt 2022.
The NSW Government will redouble its efforts to lift literacy and numeracy standards across NSW public schools to ensure students are given every opportunity to be their best.
The annual awards will recognise individuals and organisations for their leadership , commitment and innovation in sustainability across NSW.
The NSW Government will create more quality green spaces and increase ther tree canopy in Sydney bt 2022.
Carousel items
The annual awards will recognise individuals and organisations for their leadership , commitment and innovation in sustainability across NSW.
The NSW Government will create more quality green spaces and increase ther tree canopy in Sydney bt 2022.
The NSW Government will redouble its efforts to lift literacy and numeracy standards across NSW public schools to ensure students are given every opportunity to be their best.
The annual awards will recognise individuals and organisations for their leadership , commitment and innovation in sustainability across NSW.
The NSW Government will create more quality green spaces and increase ther tree canopy in Sydney bt 2022.
The NSW Government will redouble its efforts to lift literacy and numeracy standards across NSW public schools to ensure students are given every opportunity to be their best.
The annual awards will recognise individuals and organisations for their leadership , commitment and innovation in sustainability across NSW.
The NSW Government will create more quality green spaces and increase ther tree canopy in Sydney bt 2022.
The NSW Government will redouble its efforts to lift literacy and numeracy standards across NSW public schools to ensure students are given every opportunity to be their best.