Options

All options passed to the Slider constructor. All are optional with sensible defaults.

Layout

Option	Type	Default	Description
`slidesPerPage`	`number \| 'auto'`	`1`	Number of slides visible per page.
`gutter`	`number`	`0`	Gap in pixels between slides.
`edgePadding`	`number`	`0`	Padding in pixels on both edges of the container, peeking next/prev slides.
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Slide direction.
`centered`	`boolean`	`false`	Center the active slide.

Behavior

Option	Type	Default	Description
`loop`	`boolean`	`false`	Infinite loop via DOM clones.
`rewind`	`boolean`	`false`	Jump from last to first (and vice versa) without clones.
`speed`	`number`	`300`	Transition duration in ms.
`grabCursor`	`boolean`	`true`	Show grab cursor on hover.
`startIndex`	`number`	`0`	Initial active slide index.
`freezable`	`boolean`	`true`	Freeze (disable interaction) when all slides fit on one page.
`disabled`	`boolean`	`false`	Initialize in disabled state.

Touch & drag

Option	Type	Default	Description
`touch`	`boolean`	`true`	Enable touch events.
`mouseDrag`	`boolean`	`false`	Enable mouse drag.
`swipeThreshold`	`number`	`50`	Minimum swipe distance in px to trigger navigation.
`swipeAngle`	`number`	`15`	Max angle (degrees) to consider a swipe valid.
`resistance`	`boolean`	`true`	Add resistance at the edges.
`resistanceRatio`	`number`	`0.85`	Resistance multiplier (0–1).
`preventScrollOnTouch`	`'auto' \| 'force' \| false`	`'auto'`	Prevent page scroll during horizontal swipe.

Responsive / Breakpoints

const slider = new Slider('#el', {
  slidesPerPage: 1,
  gutter: 0,
  breakpoints: {
    768: { slidesPerPage: 2, gutter: 16 },
    1024: { slidesPerPage: 3, gutter: 24, edgePadding: 32 },
  },
})

Breakpoint keys are min-width values. Options merge with the base config at each breakpoint.

Accessibility

Option	Type	Default
`a11y.enabled`	`boolean`	`true`
`a11y.prevSlideMessage`	`string`	`'Previous slide'`
`a11y.nextSlideMessage`	`string`	`'Next slide'`
`a11y.slideLabel`	`string`	`'{"{"index}} of {"{"total}}'`

Plugins

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

new Slider('#el', {
  plugins: [arrows(), pagination({ type: 'dots' })],
})

Events (on init)

new Slider('#el', {
  on: {
    afterSlideChange: ({ index, previousIndex }) => {
      console.log('Went from', previousIndex, 'to', index)
    },
    progress: ({ progress }) => {
      progressBar.style.width = progress * 100 + '%'
    },
  },
})