API

Methods

skipTo

Shows a slide at the specified index starting from 0. Returns a promise that resolves when the transition is complete.

slider.skipTo(3).then(() => {
  // show 4th slide
  // transition complete
})

play

Start auto scrolling the slides

slider.play()

pause

Pause an already auto scrolling slider

slider.pause()

destroy

Destroys the slider and returns the HTML elements to their original state.

slider.destroy()

next

Moves the slider to the next slide. Returns a promise that resolves when the transition is complete.

slider.next().then(() => {
  // transition complete
})

prev

Moves the slider to the previous slide. Returns a promise that resolves when the transition is complete.

slider.prev().then(() => {
  // transition complete
})

reset

Re-initialises the slider with updated options. An updated effect may also be passed as the second parameter.

slider.reset(options, effect)

addEventListener

Adds a listener for the specified event. See the event documentation for the available events.

const afterTransitionListener = () => {
  // Take some action when the event occurs
}

slider.addEventListener('after', afterTransitionListener)

removeEventListener

Removes the listener for the specified event.

slider.removeEventListener('after', afterTransitionListener)

Events

init

Fires when a slider is initialised.

slider.addEventListener('init', () => {
  // No event data
})

before

Fires before each slide transition starts. The current and next indexes are supplied in the event data as well as the transition speed.

slider.addEventListener('before', (data) => {
  // data: {
  //   currentIndex: number
  //   nextIndex: number
  //   speed: number
  // }
})

after

Fires after each slide transition is complete. The active index is supplied in the event data

slider.addEventListener('after', (data) => {
  // data: {
  //   currentIndex: number
  //   speed: number
  // }
})

progress

Fires during progressive drag transitions with the current progress percentage.

slider.addEventListener('progress', (data) => {
  // data: {
  //   currentIndex: number
  //   nextIndex: number
  //   progress: number (0-100)
  // }
})

cancel

Fires when a progressive drag transition is cancelled (user releases before completing).

slider.addEventListener('cancel', (data) => {
  // data: {
  //   currentIndex: number
  //   nextIndex: number
  //   speed: number
  // }
})

play

Fires when the slider is put into play mode.

slider.addEventListener('play', (data) => {
  // data: {
  //   currentIndex: number
  //   speed: number
  // }
})

pause

Fires when an autoScroll'ing slider is paused.

slider.addEventListener('pause', (data) => {
  // data: {
  //   currentIndex: number
  //   speed: number
  // }
})

reset

Fires when a slider is reset. This can happen when the reset method is called or when the slider element is resized.

slider.addEventListener('reset', () => {
  // No event data
})

destroy

Fires when a slider is destroyed.

slider.addEventListener('destroy', () => {
  // No event data
})