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.
Another example
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!