Accessibility (a11y plugin)

Adds the full WAI-ARIA carousel pattern. Open DevTools → Elements to see the roles and labels, or use a screen reader — it will announce the carousel region and each slide's position.

View code

<div id="my-slider">
  <div class="demo-slide s-purple">1</div>
  <div class="demo-slide s-blue">2</div>
  <div class="demo-slide s-green">3</div>
  <div class="demo-slide s-amber">4</div>
  <div class="demo-slide s-red">5</div>
</div>

.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }

.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }

import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination, a11y } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  items: 1,
  loop: true,
  speed: 300,
  plugins: [
    arrows(),
    pagination({ type: 'dots', clickable: true }),
    a11y({
      containerLabel: 'Image carousel',
      slideLabel: '{{index}} of {{total}}',
    }),
  ],
})

Translated labels

containerLabel and slideLabel are fully translatable. This example uses Spanish.

View code

<div id="my-slider">
  <div class="demo-slide s-purple">1</div>
  <div class="demo-slide s-blue">2</div>
  <div class="demo-slide s-green">3</div>
  <div class="demo-slide s-amber">4</div>
  <div class="demo-slide s-red">5</div>
</div>

.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }

.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }

import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination, a11y } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  items: 1,
  loop: true,
  speed: 300,
  plugins: [
    arrows(),
    pagination({ type: 'dots', clickable: true }),
    a11y({
      containerLabel: 'Galería de imágenes',
      slideLabel: 'Imagen {{index}} de {{total}}',
    }),
  ],
})

What the screen reader sees