Events live log

Navigate the slider and watch every event fire in real time. The log shows the event name and the most useful fields from the SliderInfo object.

1
2
3
4
5
    View code 
    <div id="my-slider">
  <div class="demo-slide s-purple">1</div>
  <div class="demo-slide s-blue">2</div>
  <div class="demo-slide s-green">3</div>
  <div class="demo-slide s-amber">4</div>
  <div class="demo-slide s-red">5</div>
</div>

<ul id="event-log" style="margin-top:16px;list-style:none;padding:12px 16px;font-family:monospace;font-size:13px;max-height:220px;overflow-y:auto;background:#0f172a;color:#94a3b8;border-radius:8px;"></ul>
    .demo-slide { height: 220px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; border-radius:8px; }
    .demo-slide { height: 220px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; border-radius:8px; }
    import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'

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

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

function addEntry(event, detail) {
  const li = document.createElement('li')
  li.style.cssText = 'padding:3px 0; border-bottom:1px solid #1e293b;'
  li.innerHTML = '<span style="color:#818cf8;font-weight:600">' + event + '</span> ' + detail
  log.prepend(li)
  if (log.children.length > 30) log.lastChild.remove()
}

slider.on('beforeInit',      ()     => addEntry('beforeInit',      ''))
slider.on('afterInit',       (info) => addEntry('afterInit',       'slides:' + info.slideCount))
slider.on('indexChanged',    (info) => addEntry('indexChanged',    'slide ' + info.displayIndex + '/' + info.slideCount))
slider.on('transitionStart', (info) => addEntry('transitionStart', '→ ' + info.displayIndex))
slider.on('transitionEnd',   (info) => addEntry('transitionEnd',   'landed ' + info.displayIndex))
slider.on('touchStart',      ()     => addEntry('touchStart',      ''))
slider.on('touchEnd',        ()     => addEntry('touchEnd',        ''))
slider.on('resize',          (info) => addEntry('resize',          'items:' + info.items))