Démos : Carrousel accessible avec ARIA, en Vanilla JS

Première zone de contenu

Ce premier exemple de carrousel accessible a une animation de slide. Testez-la !

Deuxième zone de contenu

Il est possible de naviguer avec Tab. Les contrôles ci-dessous se naviguent avec les flèches gauche et droite.

Troisième zone de contenu

Cet exemple comprend des titres h2 (qui seront repris pour les boutons ci-dessous), c’est donc un parfait exemple.

Cet exemple a une transition différente (un fondu, spécifié par data-carrousel-transition="fade"). Et utilise data-carousel-hide-arrows-focus="true".

Dans ce cas, le contenu n’a pas de titres, ils seront générés par le script via data-carrousel-hx="h2".

Il est donc possible d’avoir des designs et des transitions totalement séparés.

Un premier contenu

Ok, je n’ai pas de transition, mais et moi ?

Un contenu affiché de suite

Là on arrive directement sur le deuxième contenu, grâce à data-carrousel-active-slide="2".

Un autre contenu

Bin et moi aussi ?