CSS değişkenleri ve part
Kontroller kapalı bir shadow root içinde yaşar. Onları custom property'ler ve ::part() ile, slaytlarınızı sıradan CSS ile stilleyin. Ayrıntılı anlatım tema sayfasında.
Custom property'ler
| Property | Varsayılan | Açıklama |
|---|---|---|
--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 rengi. |
--ins-pag-fg | currentColor | Slaytların dışındaki sayfalamanın rengi. |
--ins-dot-active | currentColor (dışarıda), #fff (içeride) | Aktif nokta. |
--ins-accent | currentColor (dışarıda), #fff (içeride) | İlerleme çubuğu ve otomatik oynatma halkası. |
--ins-focus | #4f7cff | Odak halkası. |
--ins-dur | 360ms | Kontrol geçişleri. |
--ins-dur-fast | 160ms | Basma / hover geri bildirimi. |
--ins-ease, --ins-ease-out | eğriler | Kontrol yumuşatması. |
Bunun yerine ayarlarla verin: arrowSize, arrowOffset (--ins-arrow, --ins-arrow-off olur).
Part'lar
| Part | Eleman |
|---|---|
viewport | Slayt alanı |
arrow · prev · next | Ok butonları |
bar | Sayfalama ve otomatik oynatma satırı |
pagination | Sayfalama kutusu |
dot · dot-active | Noktalar |
autoplay | Otomatik oynatma butonu |
css
insigne-slider::part(arrow) { width: 52px; height: 52px; border-radius: 12px; }
insigne-slider::part(dot-active) { background: transparent; }Slaytlarınız için seçiciler
.ins-slide, .is-active, .is-prev, .is-next, .has-bg, .is-thumb-active ve slider üzerinde [data-ins-ready]. Bölünmüş katman parçaları: .ins-w (kelime), .ins-c (harf).