Destroy & rebuild

destroy() tears down the slider completely — removes all event listeners, resets the DOM to its original pre-init state, and clears the internal instance. Call rebuild() on the same instance to re-initialize, optionally passing new options. This is useful when you need to reconfigure the slider at runtime — for example, switching from single-slide to multi-slide layout on window resize, or toggling effects on user request.

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
    <div class="c--slider-a__slide">5</div>
  </div>
</div>
<div id="my-pag" class="c--slider-a__pagination"></div>
<div class="ctrl-row">
  <button id="btn-destroy">Destroy</button>
  <button id="btn-rebuild">Rebuild (1 per page)</button>
  <button id="btn-rebuild3">Rebuild (3 per page)</button>
</div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }
.c--slider-a__slide { flex-shrink: 0; width: 100%; height: 260px; }

.ctrl-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
button {
  padding: 7px 14px; border: 1px solid #d1d5db; border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 0.82rem; font-weight: 500;
}

.ctrl-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

button {
  padding: 7px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
}

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    width: 100%;
    height: 260px;
  }
}

import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'

let slider = new Slider('#my-slider', {
  loop: true,
  plugins: [
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
})

document.getElementById('btn-destroy').addEventListener('click', () => {
  slider.destroy()
})

document.getElementById('btn-rebuild').addEventListener('click', () => {
  slider = slider.rebuild({ slidesPerPage: 1, loop: true })
})

document.getElementById('btn-rebuild3').addEventListener('click', () => {
  slider = slider.rebuild({ slidesPerPage: 3, gutter: 12, loop: false, rewind: true })
})

Responsive rebuild on resize

A common pattern: initialize with mobile settings, then rebuild with different options when the viewport crosses a breakpoint. destroy() + rebuild() is simpler than maintaining multiple slider instances or patching options after init. The slider below switches between 1 and 3 slides per page as you resize the window.

Resize the window to trigger a rebuild with different options.

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
    <div class="c--slider-a__slide">5</div>
    <div class="c--slider-a__slide">6</div>
  </div>
</div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }
.c--slider-a__slide { flex-shrink: 0; height: 180px; }

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    height: 180px;
  }
}

import { Slider } from '@andresclua/sliderkit'
import { arrows } from '@andresclua/sliderkit-plugins'

function getOptions() {
  return window.innerWidth >= 768
    ? { slidesPerPage: 3, gutter: 16, loop: false, rewind: true }
    : { slidesPerPage: 1, loop: false, rewind: true }
}

let slider = new Slider('#my-slider', {
  ...getOptions(),
  plugins: [arrows()],
})

let resizeTimer: ReturnType<typeof setTimeout>
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer)
  resizeTimer = setTimeout(() => {
    slider = slider.rebuild(getOptions())
  }, 150)
})