Events

SliderKit emits events at every stage of its lifecycle. Subscribe via slider.on(event, fn) after init, or via onInit to get the instance first.

Usage

const slider = new Slider('#my-slider', { loop: true })

slider.on('indexChanged', (info) => { console.log(info.displayIndex) })

// unsubscribe
slider.off('indexChanged', myHandler)

SliderInfo object

Every event handler receives a SliderInfo snapshot of the slider's state at the moment the event fired. You rarely need all fields — here's which ones to reach for:

The fields you'll use most

Field	Type	Description
`displayIndex`	number	1-based current slide number. Use this to show "3 / 5" to users — it's always a clean 1–N number regardless of loop clones.
`slideCount`	number	Total real slides. Paired with `displayIndex` you get "current / total".
`items`	number	How many slides are visible right now. Changes when a responsive breakpoint fires.

slider.on('indexChanged', ({ displayIndex, slideCount }) => {
  label.textContent = displayIndex + ' / ' + slideCount  // "3 / 5"
})

Index internals (rarely needed)

The slider adds clone slides on both ends when loop:true so transitions look seamless. index tracks position inside this extended list — you almost never need it directly.

Field	Type	Description
`index`	number	Internal position including clone offset. With 5 slides and `loop:true`, real slides sit at positions 5–9 inside a 15-item list.
`indexCached`	number	The `index` value from the previous event — useful to detect direction (`index > indexCached` = forward).
`cloneCount`	number	How many clones were added on each side. Clones are identical DOM nodes, not real slides.
`slideCountNew`	number	`slideCount + cloneCount * 2`. The full length of the internal slide list.

// Detect swipe direction
slider.on('indexChanged', ({ index, indexCached }) => {
  const direction = index > indexCached ? 'forward' : 'backward'
  console.log(direction)
})

Other fields

Field	Type	Description
`container`	HTMLElement	The slider's container element — same as what you passed to `new Slider()`.
`slideItems`	HTMLCollectionOf<Element>	Live collection of all slide elements including clones. Index 0 is the first clone when `loop:true`.
`slideBy`	number \| 'page'	How many slides advance per arrow click at this moment.
`isOn`	boolean	`true` while the slider is active (not destroyed).
`event`	Event \| undefined	The raw DOM event that triggered this (touch, mouse, keyboard). `undefined` for programmatic navigation.

Slide events

Event	When
`indexChanged`	The active index changes. Fires before the CSS transition starts.
`transitionStart`	The CSS transition begins.
`transitionEnd`	The CSS transition completes (or immediately if `speed:0`).

// Update a custom counter: "3 / 5"
const label = document.querySelector('#slide-label')
slider.on('indexChanged', (info) => {
  label.textContent = info.displayIndex + ' / ' + info.slideCount
})

// Add a CSS class to the container while animating
slider.on('transitionStart', () => document.body.classList.add('is-sliding'))
slider.on('transitionEnd',   () => document.body.classList.remove('is-sliding'))

Touch events

Event	When
`touchStart`	Touch begins on the slider.
`touchMove`	Touch moves while panning.
`touchEnd`	Touch ends or is cancelled.

// Pause a video when the user starts swiping
const video = document.querySelector('video')

slider.on('touchStart', () => video.pause())
slider.on('touchEnd',   () => video.play())

Drag events

Event	When
`dragStart`	Mouse button pressed on the slider (requires `mouseDrag:true`).
`dragMove`	Mouse dragged while button is held.
`dragEnd`	Mouse button released.

// Log drag distance on release
slider.on('dragStart', (info) => {
  console.log('drag started, current slide:', info.displayIndex)
})

slider.on('dragEnd', (info) => {
  console.log('drag ended, landed on slide:', info.displayIndex)
})

Responsive events

Event	When
`newBreakpointStart`	Window crosses a responsive breakpoint — before recalculation.
`newBreakpointEnd`	After the slider recalculates for the new breakpoint.
`resize`	After every resize cycle completes, whether or not a breakpoint changed.

// Re-render an external UI element after the slider adapts to a new breakpoint
slider.on('newBreakpointEnd', (info) => {
  console.log('now showing', info.items, 'items per page')
})

Lifecycle events

Event	When
`beforeInit`	Before the slider builds the DOM. No wrappers or clones exist yet.
`afterInit`	After init is fully complete and all plugins are installed.
`beforeDestroy`	Before the slider tears down — DOM and plugins are still alive.
`afterDestroy`	After the DOM has been restored and plugins destroyed.

// Measure init time
const t0 = performance.now()
slider.on('beforeInit', () => {  console.log('slider starting…') })
slider.on('afterInit',  () => {  console.log('ready in', performance.now() - t0, 'ms') })

// Clean up something external before the slider tears down
slider.on('beforeDestroy', () => {
  myExternalWidget.detach()
})

Demo

See the events demo →