@andresclua/sliderkit-plugins

Plugins for SliderKit — arrows, pagination, autoplay, thumbs, progress, mouse wheel, keyboard, accessibility, and hooks.

Full documentation & demos →

Installation

npm install @andresclua/sliderkit @andresclua/sliderkit-plugins
# or
pnpm add @andresclua/sliderkit @andresclua/sliderkit-plugins

Usage

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

new Slider('#my-slider', {
  items: 1,
  loop:  true,
  plugins: [
    arrows(),
    pagination({ type: 'dots' }),
    autoplay({ delay: 3000 }),
  ],
})

Available plugins

arrows()

Previous / next navigation buttons injected into .sliderkit__outer.

arrows()

pagination()

Dots, fraction, or progress-bar style pagination.

pagination({
  type: 'dots',       // 'dots' | 'fraction' | 'progress'
  clickable: true,
})

autoplay()

Auto-advance slides on a timer.

autoplay({
  delay:          3000,
  pauseOnHover:   true,
  stopOnLastSlide: false,
})

thumbs()

Thumbnail strip that syncs with the main slider.

thumbs({ el: '#thumbs-container' })

progress()

Animated progress bar that fills across the autoplay interval.

progress({ el: '#progress-bar' })

mouseWheel()

Navigate with the scroll wheel.

mouseWheel()

keyboard()

Navigate with arrow keys when the slider is focused.

keyboard()

a11y()

ARIA roles, live regions, and keyboard-accessible markup.

a11y({
  prevSlideMessage: 'Previous slide',
  nextSlideMessage: 'Next slide',
})

hooks()

Lifecycle callbacks: beforeChange, afterChange.

hooks({
  beforeChange: ({ from, to }) => { /* … */ },
  afterChange:  ({ index })    => { /* … */ },
})

Documentation · GitHub · MIT License