Carousel

Notes for developers

Built to be used in conjunction with Cards. Examples of how these can be used within a page will be available shortly.

All cards within a single carousel must have equal widths but the number of cards shown at any one time at the different widths can be adjusted to match the layout when JavaScript is now available. This can be achieved by including the data attribute data-slides along side the data-module attribute. The value should be formatted as and array with the number of cards required for display at small, medium then large screen. For example if 1 card was required for small, 2 at medium and 3 at large the code would be:

<div class="l-columns l-columns--2-medium l-columns--3-large o-carousel" data-module="o-carousel" data-slides="[1,2,3]">

To disable the carousel at a particular breakpoint set the number of cards to 0. For example to have a carousel only at mobile data-slides should be set too [1,0,0].

Changing locale settings

Default text for the navigation controls can be changed for a particular locale.

en: {
	oCarousel : {
		previousPageLong : 'Previous, {x} of {y}',
		previousPage : 'Previous',
		page : '{x} of {y}',
		nextPageLong : 'Next, {x} of {y}',
		nextPage : 'Next',
	},
},

For more information on this, see our page on how to change locale settings within JavaScript.

Controling the carousel programatically

Carousels can be controlled programatically to move forward and backwards by a single slide or move to a particular slide by referencing the particular card that needs to be navigated to. The following methods are available for use:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/o-carousel' ], function ( oCarouselModule ) {
		var carouselEl = document.querySelector( '#carouselId' ),
			carouselInstance = oCarouselModule.initInstance( carouselEl );		carouselInstance.gotoSlide( '#uniqueCardId' );
	});
});

Notes for testers

• Card carousel will only display when the number of cards exceeds the maximum single line width at each breakpoint, ie.:

  • over 60em: four single cards;
  • over 35em: two single cards;
  • less than 35em: one single card.
• If no JavaScript is present, by default only the first of four single cards will display; all other cards will be hidden.
• Pagination is hidden below the 60em breakpoint.
• Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
• Use a screen reader to confirm that the links are understandable as to where they will be going when listed out of context of the page.
• Ensure that when hovering over a link the style changes noticeably.
• Ensure that when a link has focus the style changes noticeably.
• Ensure that text within links is descriptive of what or where the link is going. Additional text descriptive text can be hidden visually from the user to aid in make the link understandable especially if there area number of links such as "Find out more" on the page which go to different locations.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Keyboard operations

TAB

Tabbing to an anchor should make the link clearly visually different so that the focus point on the page is obvious to the user

SPACE or ENTER

With focus on an anchor, pressing SPACE or ENTER will open the relevant page.