Basitten gelişmişe

Üç görselden, kendi kontrolleri olan veri tabanlı bir hero'ya beş adım. Her adım canlı; herhangi birini playground'da açıp devam edin.

Adım 1 — Üç görsel

<!-- Step 1: three images. Responsive, swipeable, accessible. -->
<insigne-slider aria-label="Destinations">
  <img src="https://picsum.photos/id/1015/1800/1100" alt="Fjord between mountains">
  <img src="https://picsum.photos/id/1036/1800/1100" alt="Snowy forest">
  <img src="https://picsum.photos/id/1043/1800/1100" alt="Rainy city street">
</insigne-slider>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Şimdiden responsive (yükseklik fotoğrafları izler, telefonda daha dik), momentumla kaydırılabilir, klavyeyle erişilebilir; noktalar, üzerine gelince oklar ve her slayt için ekran okuyucu duyurusu var.

Adım 2 — Arka planlar ve içerik

Her görseli data-bg ile slayt arka planına çevirin ve üstüne HTML koyun. data-focus kadrajda kalması gerekeni işaretler; playground'da telefon genişliğini deneyin.

<style>
  .copy { position: absolute; left: 6%; bottom: 13%; right: 6%; color: #fff; }
  .copy h2 { margin: 0; font-size: clamp(28px, 5.5vw, 58px); letter-spacing: -.03em; line-height: 1.04; }
  .shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); }
</style>

<!-- Step 2: backgrounds with a focal point, and a headline on top. -->
<insigne-slider aria-label="Destinations">
  <div>
    <img data-bg src="https://picsum.photos/id/1015/1800/1100" alt="Fjord between mountains" data-focus="62% 45%">
    <div class="shade"></div>
    <div class="copy"><h2>Norway</h2></div>
  </div>
  <div>
    <img data-bg src="https://picsum.photos/id/1036/1800/1100" alt="Snowy forest" data-focus="45% 55%">
    <div class="shade"></div>
    <div class="copy"><h2>Lapland</h2></div>
  </div>
  <div>
    <img data-bg src="https://picsum.photos/id/1043/1800/1100" alt="Rainy city street">
    <div class="shade"></div>
    <div class="copy"><h2>Tokyo</h2></div>
  </div>
</insigne-slider>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Adım 3 — Hareket

Bir efekt, duraklatma halkalı otomatik oynatma, odak noktası etrafında Ken Burns ve iki canlı katman. Hâlâ yalnızca attribute.

<style>
  .copy { position: absolute; left: 6%; bottom: 13%; right: 6%; color: #fff; }
  .copy small { font: 600 12px system-ui; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
  .copy h2 { margin: 10px 0 0; font-size: clamp(28px, 5.5vw, 58px); letter-spacing: -.03em; line-height: 1.04; }
  .shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); }
</style>

<!-- Step 3: an effect, autoplay with a pause button, Ken Burns, and animated layers. -->
<insigne-slider aria-label="Destinations" effect="fade" autoplay="6000" ken-burns="alternate" pagination="fraction">
  <div>
    <img data-bg src="https://picsum.photos/id/1015/1800/1100" alt="Fjord between mountains" data-focus="62% 45%">
    <div class="shade"></div>
    <div class="copy"><small data-in="fade">01 · Scandinavia</small><h2 data-in="chars-up">Norway</h2></div>
  </div>
  <div>
    <img data-bg src="https://picsum.photos/id/1036/1800/1100" alt="Snowy forest" data-focus="45% 55%">
    <div class="shade"></div>
    <div class="copy"><small data-in="fade">02 · Arctic</small><h2 data-in="chars-up">Lapland</h2></div>
  </div>
  <div>
    <img data-bg src="https://picsum.photos/id/1043/1800/1100" alt="Rainy city street">
    <div class="shade"></div>
    <div class="copy"><small data-in="fade">03 · Japan</small><h2 data-in="chars-up">Tokyo</h2></div>
  </div>
</insigne-slider>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Adım 4 — Premium dokunuşlar

Geniş ekranlarda WebGL geçiş, dar ekranlarda daha hafif bir CSS efekti (kırılımlar slider'ın genişliğine bakar), güneş ışınları ve CSS custom property'lerle marka renkleri.

<style>
  .copy { position: absolute; left: 6%; bottom: 13%; right: 6%; color: #fff; }
  .copy small { font: 600 12px system-ui; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
  .copy h2 { margin: 10px 0 0; font-size: clamp(28px, 5.5vw, 58px); letter-spacing: -.03em; line-height: 1.04; }
  .shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); }
  /* Brand the controls from outside the shadow root */
  insigne-slider { --ins-radius: 16px; --ins-arrow-bg: rgba(18,18,16,.72); --ins-arrow-fg: #f3f1ec; --ins-accent: #c9a35b; }
</style>

<!-- Step 4: a WebGL transition on desktop, a light CSS effect on narrow screens, and theming. -->
<insigne-slider aria-label="Destinations" effect="iris" autoplay="6000" ken-burns="alternate" pagination="fraction"
  breakpoints='{"900":{"effect":"ripple"}}' overlay="beams">
  <div>
    <img data-bg src="https://picsum.photos/id/1015/1800/1100" alt="Fjord between mountains" data-focus="62% 45%">
    <div class="shade"></div>
    <div class="copy"><small data-in="fade">01 · Scandinavia</small><h2 data-in="chars-up">Norway</h2></div>
  </div>
  <div>
    <img data-bg src="https://picsum.photos/id/1036/1800/1100" alt="Snowy forest" data-focus="45% 55%">
    <div class="shade"></div>
    <div class="copy"><small data-in="fade">02 · Arctic</small><h2 data-in="chars-up">Lapland</h2></div>
  </div>
  <div>
    <img data-bg src="https://picsum.photos/id/1043/1800/1100" alt="Rainy city street">
    <div class="shade"></div>
    <div class="copy"><small data-in="fade">03 · Japan</small><h2 data-in="chars-up">Tokyo</h2></div>
  </div>
</insigne-slider>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Adım 5 — Veri, kontroller ve olaylar

Slaytlar veriden gelir (bir CMS'ten gelir gibi), oklar sizin butonlarınızdır ve slider'ın etrafındaki arayüzü olaylar yönetir. Yazılar textContent ile eklenir; API verisi güvenlidir.

<style>
  .copy { position: absolute; left: 6%; bottom: 13%; right: 6%; color: #fff; }
  .copy small { font: 600 12px system-ui; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
  .copy h2 { margin: 10px 0 0; font-size: clamp(28px, 5.5vw, 58px); letter-spacing: -.03em; line-height: 1.04; }
  .shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); }
  .ui { display: flex; gap: 10px; align-items: center; margin-top: 14px; font: 14px system-ui; }
  .ui button { font: inherit; padding: 6px 12px; border-radius: 99px; border: 1px solid #cfcac0; background: #fff; cursor: pointer; }
</style>

<!-- Step 5: slides from an API, your own controls, and events. -->
<div id="trip"></div>
<div class="ui">
  <button id="prev">←</button><button id="next">→</button>
  <button id="toggle">Pause</button>
  <span id="status"></span>
</div>

<script type="module">
  // Pretend this came from your CMS.
  const places = [
    { id: 1015, name: 'Norway', region: 'Scandinavia', focus: '62% 45%' },
    { id: 1036, name: 'Lapland', region: 'Arctic', focus: '45% 55%' },
    { id: 1043, name: 'Tokyo', region: 'Japan', focus: '50% 50%' },
    { id: 1039, name: 'Oregon', region: 'Pacific Northwest', focus: '40% 50%' },
  ];

  const slider = InsigneSlider.create('#trip', {
    effect: 'fade',
    autoplay: 6000,
    kenBurns: 'alternate',
    arrows: 'hidden',
    pagination: 'progress',
    label: 'Destinations',
    slides: places.map((p, i) => ({
      bg: { src: `https://picsum.photos/id/${p.id}/1800/1100`, alt: p.name, focus: p.focus, lazy: i > 0 },
      html: '<div class="shade"></div>',
      contentClass: 'copy',
      layers: [
        { tag: 'small', text: `0${i + 1} · ${p.region}`, in: 'fade' },
        { tag: 'h2', text: p.name, in: 'chars-up' },
      ],
    })),
  });

  const $ = (s) => document.querySelector(s);
  $('#prev').onclick = () => slider.prev();
  $('#next').onclick = () => slider.next();
  $('#toggle').onclick = () => {
    slider.isPlaying ? slider.pause() : slider.play();
    $('#toggle').textContent = slider.isPlaying ? 'Pause' : 'Play';
  };
  slider.on('change', ({ index }) => ($('#status').textContent = `${places[index].name} — ${index + 1} of ${slider.count}`));
</script>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Buradan sonra

• Her ayarı ayarlar referansında ince ayarlayın.
• Kendi animasyon reçetelerinizi yazın.
• Şablonlarda hazır tasarımlara göz atın.