keyboard plugin

Let users navigate the slider with arrow keys. Works only when the slider is focused — it never hijacks the keyboard globally.

How it works

1. The plugin makes the slider wrapper focusable by adding tabindex="0" to it.
2. When the user clicks the slider (or tabs to it), it gets focus.
3. While focused, pressing ← → goes to the previous / next slide.
4. For a vertical slider (axis:'vertical'), it uses ↑ ↓ instead.
5. As soon as the user clicks somewhere else, focus leaves — and the keys stop working on the slider.

Import

import { keyboard } from '@andresclua/sliderkit-plugins'

Usage

import { Slider } from '@andresclua/sliderkit'
import { keyboard } from '@andresclua/sliderkit-plugins'

new Slider('#el', {
  items: 1,
  loop: true,
  speed: 300,
  plugins: [keyboard()],
})

Options

Option	Type	Default	Description
focusable	boolean	true	Automatically adds tabindex="0" to the outer wrapper so users can tab to it. Set to false if you manage focus yourself.

Show the focus ring

By default browsers draw a focus outline, but many CSS resets remove it. Add one back so users can see when the slider is active:

.sliderkit__outer:focus {
  outline: 3px solid #6C2BD9;
  outline-offset: 4px;
}

Key map

Key	Axis	Action
←	horizontal	Previous slide
→	horizontal	Next slide
↑	vertical	Previous slide
↓	vertical	Next slide

Pairing with a11y

Use keyboard() together with a11y() for a fully accessible slider — the a11y plugin adds the ARIA roles and labels, and the keyboard plugin handles focus-based navigation.

plugins: [
  a11y(),
  keyboard(),
]

Demo

See the keyboard demo →