JavaScript ve JSON

Var olan işaretleme üzerinde

import { InsigneSlider } from 'insigne-slider'; // ya da CDN derlemesiyle window.InsigneSlider

const slider = new InsigneSlider('#hero', {
  effect: 'iris',
  loop: 'rewind',
  autoplay: 4000,
});

<div id="hero">
  <div><img data-bg src="https://picsum.photos/id/1011/1600/1000" alt="Canoe on a lake"></div>
  <div><img data-bg src="https://picsum.photos/id/1039/1600/1000" alt="Waterfall"></div>
  <div><img data-bg src="https://picsum.photos/id/1044/1600/1000" alt="Coast"></div>
</div>
<p><button id="prev">Prev</button> <button id="next">Next</button> <span id="out"></span></p>

<script type="module">
  const slider = new InsigneSlider('#hero', {
    effect: 'iris',
    loop: 'rewind',
    autoplay: 4000,
    arrows: 'hidden',
  });
  document.querySelector('#prev').onclick = () => slider.prev();
  document.querySelector('#next').onclick = () => slider.next();
  slider.on('change', ({ index }) => (document.querySelector('#out').textContent = `Slide ${index + 1} / ${slider.count}`));
</script>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Zaten slider'ı olan bir elemanda new InsigneSlider() çağırmak, mevcut örneği döndürür ve yeni ayarları ona uygular.

Veriden: InsigneSlider.create()

create() slaytları bir tanımdan oluşturur ve slider'ı başlatır. Yazılar textContent ile eklenir; CMS veya API'den gelen içerik varsayılan olarak güvenlidir. html alanını yalnızca güvendiğiniz işaretleme için kullanın.

<style>
  body { padding: 0; }
  .title { position: absolute; left: 6%; bottom: 16%; margin: 0; color: #fff; font-size: clamp(28px, 5vw, 56px); text-shadow: 0 2px 20px rgba(0,0,0,.35); }
  .sub { position: absolute; left: 6%; bottom: 9%; margin: 0; color: #fff; opacity: .9; }
</style>
<div id="hero"></div>

<script type="module">
  InsigneSlider.create('#hero', {
    effect: 'liquid',          // a WebGL effect: loaded only because it is used
    autoplay: 5000,
    slides: [
      {
        bg: { src: 'https://picsum.photos/id/1069/1800/1200', alt: 'Jellyfish', focus: '45% 40%' },
        layers: [
          { tag: 'h2', text: 'Built from JSON', className: 'title', in: 'chars-blur' },
          { tag: 'p', text: 'Text is set with textContent: safe for CMS data.', className: 'sub', in: 'rise', delay: 300 },
        ],
      },
      {
        bg: { src: 'https://picsum.photos/id/1050/1800/1200', alt: 'Sea' },
        layers: [{ tag: 'h2', text: 'One spec, any framework', className: 'title', in: 'zoom' }],
      },
    ],
  });
</script>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Tam tanım (slaytlar, arka planlar, katmanlar, iç içe yapı) JSON şemasında.

Kontrol etmek

slider.next();
slider.prev();
slider.goTo(2, { instant: true });
slider.play();
slider.pause();
slider.update({ effect: 'cube', speed: 900 });   // mevcut slaytı korur
slider.addSlide('<div><img data-bg src="yeni.jpg" alt=""></div>');
slider.removeSlide(0);
slider.destroy();                                // işaretlemenizi geri yükler

Salt okunur durum: slider.index, slider.count, slider.slides, slider.options, slider.isPlaying, slider.isMoving. Tam liste: metotlar ve özellikler.

Olaylar

const off = slider.on('change', ({ index, previous, slide }) => { … });
slider.once('ready', () => { … });
off(); // aboneliği bırak

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Her olay elemanda insigne:<ad> olarak da yayınlanır; örneğe referans olmadan dinleyebilirsiniz.

Framework'ünüzün eklediği slaytlar

Slider çocuklarını izler. Framework'ünüz slayt eklediğinde veya çıkardığında bir sonraki microtask'ta yenilenir ve mevcut slayt hâlâ varsa onu korur. slider.refresh() ile zorlayabilirsiniz.