Destroy & Rebuild

Call slider.destroy() to cleanly remove all event listeners, reset DOM styles, and allow the element to be garbage collected.

Destroy

const slider = new Slider('#el', { plugins: [arrows()] })

// Later — clean up completely
slider.destroy()

destroy():

• Calls destroy() on every active plugin
• Removes all internal event listeners (touch, resize, keyboard)
• Removes loop clones from the DOM
• Resets wrapper transform and transition styles
• Fires the destroy event, then removes all event subscriptions

Rebuild

After destroying, create a new instance on the same element:

slider.destroy()

// Re-initialise with different options
slider = new Slider('#el', {
  slidesPerPage: 2,
  plugins: [arrows(), pagination()],
})

SPA route change pattern

let slider

function initSlider() {
  slider?.destroy()
  slider = new Slider('#el')
}

// Call on each route change / component mount
initSlider()

React / Vue ref pattern

See SSR guide for framework-specific lifecycle examples using useEffect / onMounted.

Demo

View destroy & rebuild demo →