Attach and detach event listeners

slider.on(event, handler) and slider.off(event, handler) let you subscribe and unsubscribe to any lifecycle event at any time after initialization — not just in the options. This is useful when UI state changes: for example, only track analytics while a modal is open, or pause logging during a bulk rebuild. The log below shows each event fired in real time.

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>
</div>
<div id="my-pag" class="c--slider-a__pagination"></div>
<div class="ctrl-row">
  <button id="btn-on">on('afterSlideChange')</button>
  <button id="btn-off">off('afterSlideChange')</button>
  <button id="btn-clear">Clear log</button>
</div>
<ul id="event-log"></ul>

.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; }
button { padding: 7px 14px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer; font-size: 0.82rem; }

#event-log {
  margin-top: 12px; list-style: none;
  max-height: 180px; overflow-y: auto;
  border: 1px solid #e5e7eb; border-radius: 6px;
  padding: 8px 12px; font-size: 0.82rem; font-family: monospace;
}

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

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

#event-log {
  margin-top: 12px;
  list-style: none;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-family: monospace;
}

.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'

const log = document.getElementById('event-log')
let listening = false

const handler = ({ index, previousIndex }) => {
  const li = document.createElement('li')
  li.textContent = `[${new Date().toLocaleTimeString()}] afterSlideChange: ${previousIndex} → ${index}`
  log.prepend(li)
}

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

document.getElementById('btn-on').addEventListener('click', () => {
  if (!listening) { slider.on('afterSlideChange', handler); listening = true }
})
document.getElementById('btn-off').addEventListener('click', () => {
  if (listening) { slider.off('afterSlideChange', handler); listening = false }
})
document.getElementById('btn-clear').addEventListener('click', () => { log.innerHTML = '' })

Multiple events

Attach handlers to multiple events at once using the on option at init, or call slider.on() for each event you need. Here, beforeSlideChange and afterSlideChange are both logged — letting you see the full lifecycle of each transition, including the brief animation window between them.

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>
</div>
<div id="my-pag" class="c--slider-a__pagination"></div>
<button id="btn-clear-multi">Clear log</button>
<ul id="multi-log"></ul>

.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; }

#multi-log {
  margin-top: 12px; list-style: none;
  max-height: 180px; overflow-y: auto;
  border: 1px solid #e5e7eb; border-radius: 6px;
  padding: 8px 12px; font-size: 0.82rem; font-family: monospace;
}
#multi-log li.before { color: #2563eb; }
#multi-log li.after  { color: #059669; }

#multi-log {
  margin-top: 12px;
  list-style: none;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-family: monospace;
}

#multi-log li.before {
  color: #2563eb;
}

#multi-log li.after {
  color: #059669;
}

.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'

const log = document.getElementById('multi-log')

function addEntry(event, msg, cls) {
  const li = document.createElement('li')
  li.className = cls
  li.textContent = `[${new Date().toLocaleTimeString()}] ${event}: ${msg}`
  log.prepend(li)
}

const slider = new Slider('#my-slider', {
  loop: true,
  plugins: [
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
  on: {
    beforeSlideChange: ({ index }) =>
      addEntry('beforeSlideChange', `going to ${index}`, 'before'),
    afterSlideChange: ({ index }) =>
      addEntry('afterSlideChange', `now at ${index}`, 'after'),
  },
})

document.getElementById('btn-clear-multi').addEventListener('click', () => { log.innerHTML = '' })