Web component

<insigne-slider> kütüphaneyi kullanmanın en doğrudan yolu: HTML yazın, ayarları attribute olarak verin, bitti. Düz HTML'de, sunucu şablonlarında (Blade, Twig, Django, ERB) ve React, Vue, Svelte veya Angular şablonlarının içinde çalışır.

<insigne-slider effect="cards" slides-per-view="1" pagination="fraction" pagination-placement="outside" height="360">
  <insigne-slide bg="https://picsum.photos/id/1025/1200/900" alt="Pug in a blanket" focus="50% 40%"></insigne-slide>
  <insigne-slide bg="https://picsum.photos/id/1074/1200/900" alt="Lioness" focus="45% 35%"></insigne-slide>
  <insigne-slide bg="https://picsum.photos/id/1084/1200/900" alt="Walruses"></insigne-slide>
  <insigne-slide bg="https://picsum.photos/id/1069/1200/900" alt="Jellyfish"></insigne-slide>
</insigne-slider>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Slaytlar

<script>, <template>, <style>, slot attribute'u olan ve data-ins-ignore taşıyan elemanlar dışında her doğrudan çocuk bir slayttır. Slayt herhangi bir eleman olabilir: <div>, <article>, <a>, <img> veya <insigne-slide>.

<insigne-slide>, arka plan görselli bir slayt için kısayoldur:

<insigne-slide bg="foto.jpg" alt="Açıklama" focus="30% 40%" safe="20 10 50 80" fit="smart" lazy>
  <h2 data-in="lines-up">Üstte isteğe bağlı içerik</h2>
</insigne-slide>

Attribute	Anlamı
bg	Görsel URL'si. Slaytın içinde bir <img data-bg> oluşturur.
alt	O görselin alternatif metni (boş = dekoratif).
focus	Odak noktası, "x% y%". Bkz. görseller.
safe	Güvenli alan, görselin %'si olarak "sol üst genişlik yükseklik".
fit	smart (varsayılan), cover veya contain.
lazy	Görseli yalnızca slayt gösterilmek üzereyken yükle.

Attribute olarak ayarlar

Referanstaki her ayar kebab-case bir attribute'tur. Boolean'lar yalnız yazılabilir; nesneler JSON'dur.

<insigne-slider
  effect="coverflow"
  slides-per-view="3"
  centered
  loop="rewind"
  autoplay="4000"
  pause-on-hover
  breakpoints='{"0":{"slidesPerView":1.2},"700":{"slidesPerView":3}}'>

Bir attribute'u sonradan değiştirmek, mevcut slaytı koruyarak slider'ı yerinde günceller:

document.querySelector('insigne-slider').setAttribute('effect', 'fade');

JavaScript'ten ayar

const el = document.querySelector('insigne-slider');
el.options = { effect: 'cards', autoplay: 3000 }; // hazır olmadan önce veya sonra

Eleman üzerindeki metotlar ve olaylar

el.next(); el.prev(); el.goTo(2); el.play(); el.pause();
el.index;  el.count;
el.slider;                  // InsigneSlider örneği (metotlar, olaylar, ayarlar)
el.addEventListener('insigne:change', (e) => console.log(e.detail.index));

Tüm olaylar olaylar referansında.

Başka bir adla kaydetmek

npm paketiyle define()'ı kendiniz çağırın, isterseniz kendi etiket adlarınızla:

import { define } from 'insigne-slider';
define('benim-slider', 'benim-slayt');