Kırılımsız responsive

Çoğu slider tasarlandığı ekranda doğru görünür. Insigne kendiliğinden uyum sağlar; yalnızca farklı davranış istediğiniz yerde kural eklersiniz.

Yükseklik: ayarsız

Varsayılan height: "auto" ile slider ilk arka plan görseline bakar ve oranından, konteyner boyutuna göre bir aralıkta tutulan bir yükseklik seçer:

Konteyner genişliği	Oran aralığı	Neden
≥ 1024 px	1,6 – 2,6 (geniş)	Masaüstünde sinematik
640 – 1023 px	1,25 – 1,8	Tabletler
< 640 px	0,8 – 1,25 (dikeye yakın)	Geniş bir fotoğraf telefonda okunmaz

Sonuç minHeight (240 px) ve maxHeight (92vh) ile sınırlanır. Smart fit odak noktasını kadrajda tuttuğu için telefondaki daha dik kırpım da özneyi gösterir.

Diğer yükseklik modları:

height	Davranış
"auto"	Yukarıdaki gibi. Arka plan görseli yoksa: en uzun slayt.
"image"	Her slaytın arka planının kendi oranı; hiçbir şey kırpılmaz. Yükseklik slaytlar arasında animasyonla değişir.
"content"	En uzun slaytın içeriği.
"fill"	Elemanın kendi CSS yüksekliğini doldurur (height: 100vh, grid hücreleri…).
480 / "70vh"	Sabit yükseklik, herhangi bir CSS uzunluğu.
aspect: "16/9"	Görselin oranı yerine sabit bir oran.

<!-- height="image": every slide gets its own photo's ratio, nothing is cropped. -->
<insigne-slider height="image" effect="fade" pagination="fraction" pagination-placement="outside" max-height="80vh">
  <div><img data-bg src="https://picsum.photos/id/1015/1500/1000" alt="Landscape 3:2"></div>
  <div><img data-bg src="https://picsum.photos/id/64/900/1200" alt="Portrait 3:4"></div>
  <div><img data-bg src="https://picsum.photos/id/1044/1600/900" alt="Wide 16:9"></div>
</insigne-slider>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Sütunlar: minSlideWidth

Kırılım tablosu yerine bir slaytın ne kadar daralabileceğini söyleyin. Slider sığdığı kadar gösterir:

<style>
  .card { background: #fff; border: 1px solid #e2ded5; border-radius: 14px; overflow: hidden; }
  .card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .card div { padding: 14px 16px 16px; }
  .card h3 { margin: 0 0 4px; font-size: 16px; }
  .card p { margin: 0; color: #6b6860; font-size: 14px; }
</style>

<!-- No breakpoints: as many 220px+ cards as fit the container. Resize the preview. -->
<insigne-slider min-slide-width="220" space-between="16" loop="off" height="content"
  pagination="dots" pagination-placement="outside" arrows="visible">
  <article class="card"><img src="https://picsum.photos/id/1025/600/450" alt="Pug"><div><h3>Pug</h3><p>Loves blankets</p></div></article>
  <article class="card"><img src="https://picsum.photos/id/1074/600/450" alt="Lioness"><div><h3>Lioness</h3><p>Watching closely</p></div></article>
  <article class="card"><img src="https://picsum.photos/id/1084/600/450" alt="Walruses"><div><h3>Walruses</h3><p>Beach day</p></div></article>
  <article class="card"><img src="https://picsum.photos/id/1069/600/450" alt="Jellyfish"><div><h3>Jellyfish</h3><p>Drifting</p></div></article>
  <article class="card"><img src="https://picsum.photos/id/1080/600/450" alt="Strawberries"><div><h3>Berries</h3><p>Fresh picked</p></div></article>
  <article class="card"><img src="https://picsum.photos/id/1050/600/450" alt="Sea"><div><h3>Sea</h3><p>Calm water</p></div></article>
</insigne-slider>

Önizleme yükleniyor…

Değişimi görmek için playground önizlemesini telefon veya tablete alınPlayground'da düzenle →

Kırılımlar, konteynere göre

Farklı boyutlarda farklı ayar istediğinizde breakpoints anahtarları pencerenin değil slider'ın minimum genişliğidir. Kenar çubuğundaki bir slider ile aynı slider'ın tam genişlik hali, media query olmadan doğru davranır.

<!-- Breakpoints use the slider's own width, not the window. -->
<insigne-slider effect="slide" slides-per-view="1.15" space-between="12" centered height="280"
  breakpoints='{"560":{"slidesPerView":2,"centered":false},"860":{"slidesPerView":3,"spaceBetween":20},"1100":{"effect":"coverflow","slidesPerView":3,"centered":true}}'>
  <div><img data-bg src="https://picsum.photos/id/1018/900/700" alt="Mountains"></div>
  <div><img data-bg src="https://picsum.photos/id/1036/900/700" alt="Snow"></div>
  <div><img data-bg src="https://picsum.photos/id/1043/900/700" alt="City"></div>
  <div><img data-bg src="https://picsum.photos/id/1050/900/700" alt="Sea"></div>
  <div><img data-bg src="https://picsum.photos/id/823/900/700" alt="Forest"></div>
  <div><img data-bg src="https://picsum.photos/id/1039/900/700" alt="Waterfall"></div>
</insigne-slider>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Bir kırılımda her ayar değişebilir, effect bile.

Ölçeklenen yazı

Slaytlar normal HTML'dir; bildiğiniz araçları kullanın. Konteyner birimleri yazının pencereyi değil slider'ı izlemesini sağlar:

insigne-slider { container-type: inline-size; }
.slayt-basligi { font-size: clamp(28px, 6cqi, 72px); }