a11y carousel

A simple carousel with a focus on clean, accessible markup.

While there are many good reasons for not using carousels, they remain a feature of choice for many websites. This incarnation attempts to create a light, semantic carousel while minimising the usual accessibility issues.

Features

• Can contain any html content
• Uses semantic HTML - composed of lists and buttons
• Supports responsive width and height
• Navigation is dynamically created based on carousel items
• Keyboard accessible
• Pause/play control
• Auto-play option
• Navigation controls can overlay carousel or sit beneath
• Uses CSS3 transforms when supported
• Tested on all modern browsers, and IE7+

Usage

Download the plugin, then include the css and js files.

<link rel="stylesheet" href="a11ycarousel.css" type="text/css" />
<script src="a11ycarousel.min.js" type="text/javascript"></script>


The carousel markup should be a div containing a single list of items, as below:

<div id='carousel-container'>
  <ul>
    <li>...</li>
    ...
  </ul>
</div>


The carousel can then be instantiated on the container div. This will generate the navigation automatically. All parameters are optional.

$('#carousel-container').a11ycarousel({
  doResize: true
});

Options

Option	Default	Purpose
autoPlay	false	Whether to begin playing the carousel automatically, or leave it to the user to advance slides.
playInterval	9000	Length of time each slide will be displayed when auto-playing, in milliseconds.
slideSpeed	1000	Length of time taken to transition between slides, in milliseconds.
easing	'ease'	Easing to use when transitioning between slides, applied when CSS transitions are supported.
additionalControlHeight	0	Height of control section, in pixels. When specified, the additional height will be added to the carousel container. If not specified or zero, the controls will overlay the carousel items. This option is not supported for carousels of variable height.
doResize	false	Whether to adjust carousel's width when the window is resized. Set this to true when the carousel's width is variable (e.g. a percentage value). When false, the carousel will remain at the initial width despite the window size.