Navigasyon ve otomatik oynatma

<style> .row { display: grid; gap: 22px; } </style>
<div class="row">
  <insigne-slider height="200" arrows="visible" arrows-position="bottom-right" pagination="fraction" pagination-placement="inside">
    <div><img data-bg src="https://picsum.photos/id/1018/1200/600" alt=""></div>
    <div><img data-bg src="https://picsum.photos/id/1036/1200/600" alt=""></div>
    <div><img data-bg src="https://picsum.photos/id/1043/1200/600" alt=""></div>
  </insigne-slider>
  <insigne-slider height="200" arrows="visible" arrows-placement="outside" pagination="progress" pagination-placement="outside" autoplay="3000">
    <div><img data-bg src="https://picsum.photos/id/1050/1200/600" alt=""></div>
    <div><img data-bg src="https://picsum.photos/id/823/1200/600" alt=""></div>
    <div><img data-bg src="https://picsum.photos/id/1039/1200/600" alt=""></div>
  </insigne-slider>
</div>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Oklar

Ayar	Değerler	Varsayılan
arrows	hover (fareli cihazlarda üzerine gelince, dokunmatikte her zaman), visible, hidden	hover
arrowsPlacement	inside, outside	inside
arrowsPosition	sides, bottom-left, bottom-center, bottom-right, top-right	sides
arrowSize, arrowOffset	px	44, 16

loop kapalıyken oklar uçlarda pasifleşir; sağdan sola düzenlerde ayna gibi çevrilir.

Sayfalama

pagination	Görünüm
dots	Noktalar; 7 slayttan fazlasında kayan, ölçeklenen bir pencereye dönüşür.
fraction	03 — 12
progress	Tüm slider boyunca ince bir ilerleme çubuğu.
none	Hiçbir şey.

paginationPlacement: inside (slaytların üzerinde) veya outside (altında).

Küçük resimler

İkinci bir slider'ı ilkinin küçük resimleri yapın:

<insigne-slider id="ana" thumbs="#kucuk">…</insigne-slider>
<insigne-slider id="kucuk" slides-per-view="5" space-between="8" pagination="none" height="80">…</insigne-slider>

Bir küçük resme tıklamak ana slider'ı götürür; aktif küçük resim is-thumb-active sınıfını alır.

Otomatik oynatma

<insigne-slider autoplay="5000">          <!-- veya: autoplay autoplay-delay="5000" -->

Ayar	Anlamı
pauseOnHover	İmleç slider üzerindeyken veya klavye odağı içindeyken duraklat (varsayılan açık).
stopOnInteraction	Kaydırma, ok veya nokta tıklamasından sonra tamamen durdur.
reverse	Geriye doğru oynat.
stopOnLast	Son slaytta dur (loop değilken).
autoplayProgress	Duraklat / oynat butonunun etrafında halka (varsayılan açık).

Otomatik oynatma slider ekran dışındayken veya sekme gizliyken (pauseOffscreen) her zaman durur ve hareket azaltmada hiç çalışmaz. Duraklat butonu WCAG 2.2.2'yi (duraklat, durdur, gizle) karşılar.

Klavye, tekerlek, doğrudan link

• keyboard (açık): slider odaktayken ok tuşları, PageUp/PageDown, Home/End.
• mousewheel (kapalı): fare tekerleği ve trackpad. Uçlarda sayfa kaymaya devam eder.
• hash (kapalı): #galeri-3 3. slaytı açar ve URL slider'ı izler.

Loop

loop: "loop" (varsayılan) kopya slayt olmadan sonsuzdur; DOM asla yeniden sıralanmaz. "rewind" başa atlar; "off" uçlarda lastik efektiyle durur (resistance).