Arrows

Injects previous and next navigation buttons into the slider's outer wrapper. Buttons are automatically disabled at the first and last slide when loop and rewind are both off.

Import

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

Options

Option	Type	Default	Description
prevLabel	string	'Previous slide'	aria-label on the prev button.
nextLabel	string	'Next slide'	aria-label on the next button.

CSS classes

Class	Applied when
.sliderkit__arrow	Both buttons, always.
.sliderkit__arrow--prev	Previous button.
.sliderkit__arrow--next	Next button.
.sliderkit__arrow--disabled	At the first or last slide when loop:false and rewind:false.

Example

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

new Slider('#my-slider', {
  items: 1,
  loop:  true,
  plugins: [arrows()],
})

Custom button labels

arrows({
  prevLabel: 'Anterior',
  nextLabel: 'Siguiente',
})

See it live in the Base demo →