a11y carousel

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

Fork me on GitHub

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.



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'>

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

  doResize: true


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.