Options

All options are optional. Pass them as the second argument to new Slider(target, options).

Layout

Option	Type	Default	Description
`items`	number	`1`	Number of slides visible at once.
`gutter`	number	`0`	Gap in px between slides.
`edgePadding`	number	`0`	Peek px from each side, revealing adjacent slides.
`fixedWidth`	number \| false	`false`	Fixed px width per slide instead of fluid columns.
`autoWidth`	boolean	`false`	Each slide keeps its own intrinsic width.
`center`	boolean	`false`	Centre the active slide in the viewport.
`axis`	`'horizontal' \| 'vertical'`	`'horizontal'`	Scroll direction. Vertical requires a fixed container height.

Navigation

Option	Type	Default	Description
`loop`	boolean	`true`	Infinite circular navigation. Clones boundary slides.
`rewind`	boolean	`false`	At the last slide Next jumps back to the first (and vice-versa). Implies `loop:false`.
`slideBy`	number \| `'page'`	`1`	Slides advanced per arrow click. `'page'` equals `items`.
`startIndex`	number	`0`	0-based index of the initial slide.
`speed`	number	`300`	Transition duration in ms.
`arrowKeys`	boolean	`false`	Navigate with keyboard ← → arrow keys.
`preventActionWhenRunning`	boolean	`false`	Ignore nav input while a transition is in progress.

Touch & drag

Option	Type	Default	Description
`touch`	boolean	`true`	Enable touch swipe navigation.
`mouseDrag`	boolean	`false`	Enable click-and-drag on desktop.
`swipeAngle`	number \| false	`15`	Max degrees from the axis direction to register as a swipe. `false` disables angle filtering.
`preventScrollOnTouch`	`'auto' \| 'force' \| false`	`false`	Whether to call `preventDefault()` on touch events to block page scroll.

Behaviour

Option	Type	Default	Description
`autoHeight`	boolean	`false`	Animate container height to match each slide's natural height on transition.
`freezable`	boolean	`true`	Auto-freeze (disable) when all slides fit on one page.
`lazyload`	boolean	`false`	Wait for images to load before the first transform.

Responsive

Pass a responsive map to override any option at specific window widths. Keys are min-width breakpoints in px.

new Slider('#my-slider', {
  items: 1,
  gutter: 8,
  responsive: {
    640:  { items: 2, gutter: 16 },
    960:  { items: 3, gutter: 20 },
    1280: { items: 4, gutter: 24 },
  },
})

All layout and navigation options can be overridden per breakpoint. The slider rebuilds pagination and recalculates layout automatically on each resize that crosses a breakpoint.

Note: plugins cannot be set inside responsive. If you need a plugin only above a certain breakpoint, initialise it conditionally in JS before creating the slider:

const plugins = [arrows()]
if (window.innerWidth >= 960) {
  plugins.push(progress({ container: '#my-progress' }))
}

new Slider('#my-slider', { plugins })

Callbacks & plugins

Option	Type	Default	Description
`onInit`	function \| false	`false`	Called once after the slider is fully initialised. Receives a `SliderInfo` object.
`plugins`	SliderPlugin[]	`[]`	Array of plugin instances. See Plugins.