The carousel appears on section pages. It is used to promote key messages. If only a single panel is needed, use the Section page banner instead.
Each image in the carousel has a title and alt tag.
The title tag must carry the title and credit for the image (if it has one), for example "Particle or wave... Credit: Jurvetson from Flickr".
The alt tag is useful to users who can't view images, and by browsers which don't render images. Use the alt tag if the image is necessary to understanding the meaning of the link/carousel item.
Both the image and the strapline are clickable. By default, the carousel should cycle through the panels every five seconds. If the user interacts with the carousel, the auto-cycle is disabled until the page is reloaded. The left and right arrows cycle between panels. Changing browser width or orientation will also disable the auto-cycle.
Separate desktop and mobile views are created by using a 767px max-width media query to present a different structure.
The caption text is truncated using Modernizr to detect media query detection of 1024px max-width to prevent wrapping and overlapping of other elements.
The carousel Javascript must be included in the page. The carousel Javascript dynamically appends navigation buttons and numbered indicator to describe the current slide and total slides available.
The carousel is set to autoplay using a Javascript timeout.
For mobile users Javascript is also used to calculate the height of the carousel and create full height buttons to increase the hit area. This function will be triggered if a resize event is called in case a user changes orientation whilst viewing the carousel component.
N/a