Skip to main content

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
  // }
})

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
})