Events

SliderKit fires typed events at every stage of its lifecycle. Listen via the on option or slider.on() post-init.

Usage

// On init
new Slider('#el', {
  on: {
    afterSlideChange: ({ index }) => console.log(index),
  },
})

// Post init
slider.on('afterSlideChange', ({ index }) => console.log(index))
slider.off('afterSlideChange', myHandler)

Lifecycle events

Event	Payload	Description
beforeInit	{ slider }	Before the slider initializes.
afterInit	{ slider }	After initialization is complete.
beforeDestroy	{ slider }	Before destroy() runs.
afterDestroy	{ slider }	After destroy() completes.

Slide change events

Event	Payload	Description
beforeSlideChange	{ from, to, direction, slider }	Before the active index changes.
afterSlideChange	{ index, previousIndex, slide, slider }	After the active index changes.
beforeTransitionStart	{ from, to, direction, slider }	Alias for beforeSlideChange (transition timing).
afterTransitionEnd	{ index, previousIndex, slide, slider }	Alias for afterSlideChange (transition timing).
progress	{ progress, activeIndex, slider }	Fires after each slide change. progress is 0–1.

Touch events

Event	Payload
touchStart	{ event, slider }
touchMove	{ event, delta, direction, slider }
touchEnd	{ event, slider }

Drag events

Event	Payload
dragStart	{ event, slider }
dragMove	{ event, delta, direction, slider }
dragEnd	{ event, slider }

Responsive events

Event	Payload
newBreakpointStart	{ previousBreakpoint, currentBreakpoint, options, slider }
newBreakpointEnd	{ previousBreakpoint, currentBreakpoint, options, slider }
resize	{ width, height, slidesPerPage, slider }