Olaylar

slider.on(ad, işleyici) ile abone olun ya da elemanda insigne:<ad> dinleyin; her olay iki yolla da yayınlanır. DOM olayları kabarcıklanır (bubble); bir konteynerdeki tek dinleyici birden fazla slider'ı izleyebilir.

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

Olay	Ne zaman	detail
ready	İlk yerleşimden sonra. Tetiklendikten sonra abone olunursa işleyici hemen çağrılır.	{ index, slider }
change	Mevcut slayt değişti (sürükleme, oklar, otomatik oynatma, API; her yolla).	{ index, previous, slide, slider }
movestart	Programatik ya da bırakılan bir hareket başlar.	{ index, slider } (hedef indeks)
moveend	Hareket oturdu.	{ index, slider }
resize	Slider'ın boyutu değişti.	{ width, height, slider }
autoplay	play() veya pause() çağrıldı.	{ playing, slider }
refresh	Slayt eklendi veya çıkarıldı.	{ count, slider }
destroy	destroy() çağrıldı (temizlikten önce tetiklenir).	{ slider }

Örnek

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

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Analitik

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