Ayarlar
Her ayar üç API'de de aynı şekilde çalışır. HTML'de kebab-case yazılır: slidesPerView → <insigne-slider> üzerinde slides-per-view, [data-insigne] elemanında data-slides-per-view. Nesneler (breakpoints gibi) JSON olarak yazılır.
<insigne-slider effect="fade" slides-per-view="1" autoplay="5000" breakpoints='{"768":{"effect":"slide"}}'>
<div data-insigne data-effect="fade" data-autoplay="5000">new InsigneSlider(el, { effect: 'fade', autoplay: 5000 })Swiper tarzı adlar takma ad olarak kabul edilir: gap, centeredSlides, initialSlide, navigation, disableOnInteraction, autoHeight, perView, delay.
80 ayar
Yerleşim
effecteffectenumVarsayılan "slide"Slaytlar arası geçiş. CSS efektleri her yerde çalışır; WebGL efektleri (heat-haze, ripple, liquid…) gerektiğinde yüklenir, WebGL veya CORS yoksa benzer bir CSS efektine düşer.
slidefadecubecoverflowflipcardscreativestackzoomblurrotateparallaxwarpproductsketchuncoverglitchwipecurtainirisdiagonalblindssplitshutterboxesdiamondclockheat-hazerippleliquidrgb-glitchpixel-dissolvezoom-blurswirlpage-curlinkgod-rayswarp-speedwaterluma-morphrandom-glslidesPerViewslides-per-viewnumber|enumVarsayılan 1Aralık 1 … 12Aynı anda görünen slayt sayısı (kesirli olabilir, ör. 1.2 ile sonraki slayt görünür). "auto" her slaytın kendi genişliğini kullanır.
autominSlideWidthmin-slide-widthnumberVarsayılan 0Aralık 0 … 2000Kırılım yazmadan responsive sütun: bu minimum genişlikte (px) kaç slayt sığarsa o kadar gösterilir. 0 = kapalı.
heightheightnumber|stringVarsayılan "auto""auto" (en-boy oranı / görsel oranı, ayarsız), "image" (her arka planın kendi oranı, hiçbir şey kırpılmaz), "content" (en uzun slayt), "fill" (elemanın kendi CSS yüksekliği), px cinsinden sayı veya herhangi bir CSS uzunluğu (ör. "80vh").
aspectaspectnumber|stringVarsayılan "auto"height "auto" için en-boy oranı: "auto" ilk arka plan görselinden konteyner genişliğine göre oran seçer (masaüstünde geniş, telefonda daha dik), ya da ör. "16/9", 2.4.
minHeightmin-heightnumber|stringVarsayılan 240Hesaplanan yükseklik için alt sınır (px veya CSS uzunluğu).
maxHeightmax-heightnumber|stringVarsayılan "92vh"Hesaplanan yükseklik için üst sınır (px veya CSS uzunluğu, vh pencereye göre hesaplanır).
breakpointsbreakpointsobjectVarsayılan {}Konteyner genişliğine göre değişiklikler: { 640: { slidesPerView: 2 }, 1024: { slidesPerView: 3 } }. Anahtarlar pencerenin değil slider'ın minimum genişliğidir.
Hareket ve efektler
easeeaseenumVarsayılan "auto"Programatik geçişlerin yumuşatması. "auto" efekte göre seçer. Sürükleme her zaman parmağı izler ve hızını koruyarak bırakılır.
autolinearsine.inOutpower2.inOutpower3.outpower4.outexpo.outexpo.inOutcirc.outback.outlooploopenum|booleanVarsayılan "loop""loop" (sonsuz, kopya slayt yok), "rewind" (başa döner) veya "off". true/false da kabul edilir.
looprewindoffparallaxparallaxbooleanVarsayılan trueSlaytlar hareket ettikçe data-parallax / data-parallax-opacity / data-parallax-scale olan elemanları hareket ettirir.
scrollDrivescroll-drivebooleanVarsayılan falseSayfa kaydırması slider'ı ilerletir (scroll anlatımı). Gerektiğinde yüklenir.
slideShadowsslide-shadowsbooleanVarsayılan true3D efektlerde derinlik gölgesi (cube, flip, coverflow, cards, stack).
coverflowRotatecoverflow-rotatenumberVarsayılan 40Aralık 0 … 80Coverflow: yan slaytların dönüşü (derece).
coverflowDepthcoverflow-depthnumberVarsayılan 160Aralık 0 … 600Coverflow: yan slaytların derinliği (px).
coverflowStretchcoverflow-stretchnumberVarsayılan 0Aralık -100 … 100Coverflow: yan slaytların ek aralığı (px).
creativecreativeobjectVarsayılan {"prev":{"translate":["-22%",0,-320],"…"creative" efekti: önceki / sonraki slaytın dönüşümleri ({ translate: [x, y, z], rotate: [x, y, z], scale, opacity }).
shaderAngleshader-anglenumberVarsayılan 0Aralık -180 … 180WebGL efektleri: yönlü geçişlerin açısı (derece).
shaderOriginshader-originenumVarsayılan "pointer"WebGL efektleri: dairesel geçişlerin başladığı yer (tıklama / imleç, merkez veya shaderOriginX/Y).
pointercentercustomgpugpuenumVarsayılan "auto"WebGL politikası. "auto" düşük güçlü cihazlarda ve veri tasarrufunda WebGL'i atlar.
autoprefer-webglcss-onlyOtomatik oynatma
autoplayautoplayboolean|numberVarsayılan falseOtomatik ilerler. Sayı verilirse ms cinsinden bekleme süresidir (autoplay: true + autoplayDelay ile aynı).
autoplayDelayautoplay-delaynumberVarsayılan 5000Aralık 500 … 60000Her slaytın ekranda kalma süresi (ms).
pauseOnHoverpause-on-hoverbooleanVarsayılan trueİmleç slider üzerindeyken (ve klavye odağı içindeyken) duraklar.
stopOnInteractionstop-on-interactionbooleanVarsayılan falseKullanıcı kaydırır, ok veya noktaya tıklarsa otomatik oynatma tamamen durur.
autoplayProgressautoplay-progressbooleanVarsayılan trueDuraklat / oynat butonu da olan ilerleme halkası (WCAG 2.2.2).
Etkileşim
dragdragbooleanVarsayılan trueDokunma, kalem veya fare ile kaydırma. 3D ve maske dahil her efekt parmağı izler.
resistanceresistancenumberVarsayılan 0.85Aralık 0 … 1Kenarlarda lastik efekti gücü (loop kapalıyken).
mousewheelmousewheelbooleanVarsayılan falseFare tekerleği / trackpad ile gezinme (uçlarda sayfa kaymaya devam eder).
hashhashbooleanVarsayılan falseAktif slaytı URL hash ile eşler (#slider-id-3), doğrudan link için.
Navigasyon
arrowsarrowsenum|booleanVarsayılan "hover"Önceki / sonraki butonları. "hover" fare ile üzerine gelince, dokunmatikte her zaman gösterir.
hovervisiblehiddenarrowsPlacementarrows-placementenumVarsayılan "inside"Oklar slaytların üzerinde veya dışında.
insideoutsidearrowsPositionarrows-positionenumVarsayılan "sides"Okların konumu.
sidesbottom-leftbottom-centerbottom-righttop-rightarrowSizearrow-sizenumberVarsayılan 44Aralık 24 … 96Ok butonu boyutu (px). 44 dokunma hedefi önerisini karşılar.
paginationpaginationenum|booleanVarsayılan "dots"Noktalar (7 slayttan fazlasında dinamik), "03 / 12" sayaç, ilerleme çubuğu veya hiçbiri.
dotsfractionprogressnonepaginationPlacementpagination-placementenumVarsayılan "inside"Sayfalama slaytların üzerinde veya altında.
insideoutsidethumbsthumbsstringVarsayılan ""Bu slider'ın küçük resimleri olarak çalışacak başka bir slider'ın CSS seçicisi (iki yönlü eşlenir).
Görseller
fitfitenumVarsayılan "smart"Arka plan görselinin slaytı nasıl dolduracağı. "smart", "cover" gibi doldurur ama odak noktasını ve güvenli alanı asla kesmez; kesilecekse uzaklaşır ve boşluğu görselin bulanık kopyasıyla doldurur.
smartcovercontainfocusfocusstringVarsayılan "50% 50%"Arka plan görsellerinin varsayılan odak noktası ("x% y%"). Görsel bazında: data-focus.
safesafestringVarsayılan ""Her zaman görünür kalması gereken varsayılan güvenli alan: görselin %'si olarak "sol üst genişlik yükseklik", ör. "30 10 40 80". Görsel bazında: data-safe.
backdropbackdropstringVarsayılan "blur"Uzaklaştırılan görselin etrafındaki boşluğu ne dolduracak: "blur" (bulanık kopya), "none" veya herhangi bir CSS rengi.
kenBurnsken-burnsenum|booleanVarsayılan falseAktif slaytta arka planın yavaş yakınlaşması / kayması, odak noktası merkezli. true = "zoom-out". Slayt bazında: data-ken-burns.
zoom-inzoom-outpan-leftpan-rightpan-uppan-downdiagonalalternatekenBurnsDurationken-burns-durationnumberVarsayılan 9000Aralık 1000 … 60000Ken Burns süresi (ms).
lazylazybooleanVarsayılan trueGörünmeyen slaytların görsellerini gösterilmeden hemen önce yükler.
preloadpreloadnumberVarsayılan 1Aralık 0 … 5Her iki yanda önceden yüklenecek komşu slayt sayısı.
Katmanlar
layerslayersbooleanVarsayılan trueSlaytı aktif olunca data-in (giriş), data-out (çıkış), data-loop ve data-hover olan elemanları canlandırır. Gerektiğinde yüklenir.
layerInlayer-instringVarsayılan ""Boş data-in olan elemanlar için varsayılan giriş reçetesi; "auto" ise başlık / paragraf / butonlara otomatik uygulanır.
layerOutlayer-outstringVarsayılan "reverse"Varsayılan çıkış: "reverse" (girişin tersi, daha hızlı), bir çıkış reçetesi (fade, up, down, left, blur) veya "none".
layerSpeedlayer-speednumberVarsayılan 1Aralık 0.2 … 4Tüm katman sürelerinin çarpanı (>1 = daha yavaş).
imageInimage-instringVarsayılan "none"Giren slaytın arka planı için görsel reçetesi (develop, focus, spotlight, rise, tint, flicker, depth-zoom, breathe).
recipesrecipesobjectVarsayılan {}Kendi reçeteleriniz, hazır olanların üzerine eklenir: { "my-rise": { split: "words", stagger: 40, in: [{ o: 0, y: 30 }, { o: 1, y: 0, d: 700, e: "expo.out" }] } }.
Atmosfer
overlayoverlayenumVarsayılan "none"Slaytların üzerinde hareketli ışık / doku (beams, rays, light-leak, grain, letterbox, vignette, scanlines, fog).
nonebeamsrayslight-leakgrainletterboxvignettescanlinesfogparticlesparticlesenumVarsayılan "none"Canvas parçacık alanı (stars, warp, dust, snow, embers, bokeh, fireflies, bubbles). Gerektiğinde yüklenir, ekran dışında durur.
nonestarswarpdustsnowembersbokehfirefliesbubblesscrollDepthscroll-depthnumberVarsayılan 0Aralık 0 … 1Kaydırma parallax: sayfa kayarken arka plan ve yazılar farklı hızda hareket eder (0 = kapalı, 1 = güçlü).
Erişilebilirlik
labellabelstringVarsayılan ""Slider'ın erişilebilir adı (aria-label). Varsayılan, elemanın aria-label değeridir.
i18ni18nobjectVarsayılan {}Herhangi bir etiketi değiştirin: { prev, next, goTo, slide, pause, play, carousel, slideRole }.
reducedMotionreduced-motionenumVarsayılan "auto""auto" prefers-reduced-motion'ı izler: 3D / WebGL fade olur, katmanlar hareketsiz görünür, otomatik oynatma kapanır.
autoalwaysneverpauseOffscreenpause-offscreenbooleanVarsayılan trueSlider görünmezken veya sekme gizliyken otomatik oynatmayı, WebGL'i, parçacıkları ve katman döngülerini durdurur.
Atıf
creditcreditenumVarsayılan "below"Lisansın gerektirdiği atıf: slider'ın "below" altında (varsayılan), "inside" küçük bir rozet olarak ya da sayfanızda zaten görünür bir sadiksefa.dev veya sadiksefa.com.tr linki varsa (ör. footer'da) "page".
belowinsidepagecreditThemecredit-themeenumVarsayılan "auto"Atıf renkleri. "auto" sayfa arka planına bakar.
autolightdarklicenselicensestringVarsayılan ""Verildiği domain'lerde atıf zorunluluğunu kaldıran lisans anahtarı.