Tema ve CSS

Slaytlarınız sizin HTML'inizdir: kendi CSS'inizle stilleyin, ezilecek bir şey yok. Slider'ın kendi kontrolleri (oklar, noktalar, sayfalama, otomatik oynatma butonu) bir shadow root içinde yaşar ve custom property'ler ile ::part() kullanılarak temalanır.

<style>
  /* Theme from outside: custom properties and ::part() reach into the slider. */
  .brand {
    --ins-radius: 20px;
    --ins-arrow-bg: #121210;
    --ins-arrow-fg: #f3f1ec;
    --ins-dot-active: #c9a35b;
    --ins-accent: #c9a35b;
    --ins-focus: #c9a35b;
  }
  .brand::part(arrow) { border-radius: 12px; }
</style>
<insigne-slider class="brand" height="260" arrows="visible" pagination="dots" autoplay="4000">
  <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>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Custom property'ler

Slider elemanında (veya herhangi bir atasında) ayarlayın.

Property	Varsayılan	Etkilediği
--ins-radius	0	Görüntü alanının köşe yuvarlaklığı
--ins-arrow-bg	rgba(255,255,255,.88)	Ok arka planı
--ins-arrow-fg	#14161c	Ok ikonu
--ins-pag-fg	currentColor	Slaytların dışındaki sayfalama
--ins-dot-active	currentColor / içeride #fff	Aktif nokta
--ins-accent	currentColor / içeride #fff	İlerleme çubuğu, otomatik oynatma halkası
--ins-focus	#4f7cff	Klavye odak halkası
--ins-dur, --ins-ease, --ins-ease-out	360ms, …	Kontrol geçişleri

Slaytların dışındaki sayfalama sayfanın yazı rengini (currentColor) kullanır; açık / koyu temanızı otomatik izler.

Part'lar

Part	Eleman
viewport	Slaytların hareket ettiği alan
arrow, prev, next	Ok butonları
bar	Sayfalama ve otomatik oynatma butonunu tutan satır
pagination	Nokta / sayaç / ilerleme kutusu
dot, dot-active	Tek tek noktalar
autoplay	Duraklat / oynat butonu

.benim-slider::part(arrow) { border-radius: 10px; backdrop-filter: none; }
.benim-slider::part(dot-active) { transform: scale(1.2); }

Slaytlarınızdaki sınıflar

Slider slaytlarınıza durum sınıfları ekler; kendi geçişleriniz için kullanışlıdır:

Sınıf	Ne zaman
.ins-slide	Her slayt
.is-active, .is-prev, .is-next	Mevcut slayta göre
.has-bg	Slaytın data-bg arka planı var
.is-thumb-active	Ana slider'ın mevcut slaytının küçük resmi

Slider elemanında: başladıktan sonra [data-ins-ready], katman motoru aktifken [data-ins-motion].