Events

Subscribe with slider.on(name, handler), or listen on the element for insigne:<name> — every event is dispatched both ways. DOM events bubble, so one listener on a container can watch several sliders.

slider.on('change', (d) => console.log(d.index));
document.addEventListener('insigne:change', (e) => console.log(e.target, e.detail.index));

Event	When	detail
ready	After the first layout. Subscribing after it fired calls the handler right away.	{ index, slider }
change	The current slide changed (by any means: drag, arrows, autoplay, API).	{ index, previous, slide, slider }
movestart	A programmatic or released move begins.	{ index, slider } — the target index
moveend	The move settled.	{ index, slider }
resize	The slider's size changed.	{ width, height, slider }
autoplay	play() or pause() was called.	{ playing, slider }
refresh	Slides were added or removed.	{ count, slider }
destroy	destroy() was called (fired before teardown).	{ slider }

Example

<style>
  pre { background: #121210; color: #e7e3da; padding: 12px; border-radius: 10px; height: 140px; overflow: auto; font-size: 12px; }
</style>
<div id="s">
  <div><img data-bg src="https://picsum.photos/id/1039/1200/600" alt=""></div>
  <div><img data-bg src="https://picsum.photos/id/1044/1200/600" alt=""></div>
  <div><img data-bg src="https://picsum.photos/id/1067/1200/600" alt=""></div>
</div>
<pre id="log"></pre>

<script type="module">
  const out = document.querySelector('#log');
  const log = (m) => (out.textContent = m + '\n' + out.textContent);
  const s = new InsigneSlider('#s', { height: 220 });
  s.on('ready', ({ index }) => log(`ready (index ${index})`));
  s.on('change', ({ index, previous }) => log(`change ${previous} → ${index}`));
  s.on('movestart', ({ index }) => log(`movestart → ${index}`));
  s.on('moveend', ({ index }) => log(`moveend at ${index}`));
  // The same events bubble as DOM events:
  document.querySelector('#s').addEventListener('insigne:resize', (e) => log(`resize ${e.detail.width}px`));
</script>

Loading preview…

Live previewEdit in playground →

Analytics

slider.on('change', ({ index, slide }) => {
  gtag('event', 'slide_view', { slide_index: index, slide_title: slide.querySelector('h2')?.textContent });
});