Demos: Accessible Carrousel using ARIA, and Vanilla JS

First content zone

This first example of accessible carrousel is animated. You may test it!

Second content zone

You may use Tab. Controls below can be browsed using left and right arrows on the keyboard.

Third content zone

This example is using h2 headings (which will be used for buttons bellow), so it is the perfect case study.

This example has a different transition (fade in/fade out, specified using data-carrousel-transition="fade"). And uses data-carousel-hide-arrows-focus="true" option.

In this case, content has no heading, they will be generated by the script using data-carrousel-hx="h2".

So it is possible to have separated layout and transitions.

A first content

Ok, I don’t have any transition!

A content already displayed

We are on second content zone, thanks to data-carrousel-active-slide="2" attribute.

Another content

Hey, I’m here!