Framework ve CMS

Insigne Slider slaytlarınızı sizin DOM'unuzda tutar ve bir shadow root slot'u ile yansıtır. Framework'ler düğümlerinin sahibi olmaya devam eder; kurulacak ayrı bir sarmalayıcı paket yok.

React

import { useEffect, useRef } from 'react';
import { InsigneSlider } from 'insigne-slider';

export function Hero({ slides }) {
  const ref = useRef(null);
  useEffect(() => {
    const s = new InsigneSlider(ref.current, { effect: 'fade', autoplay: 5000 });
    return () => s.destroy();
  }, []);
  return (
    <div ref={ref} aria-label="Öne çıkanlar">
      {slides.map((s) => (
        <div key={s.id}>
          <img data-bg src={s.image} alt={s.alt} data-focus={s.focus} />
          <h2 data-in="lines-up">{s.title}</h2>
        </div>
      ))}
    </div>
  );
}

slides dizisine eleman eklemek veya çıkarmak slider'ı otomatik yeniler. React 19 ile, define()'ı bir kez çağırdıktan sonra elemanı doğrudan da kullanabilirsiniz: <insigne-slider effect="fade">…</insigne-slider>.

Vue

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { InsigneSlider } from 'insigne-slider';
const el = ref(null);
let slider;
onMounted(() => (slider = new InsigneSlider(el.value, { effect: 'cube' })));
onBeforeUnmount(() => slider?.destroy());
</script>

<template>
  <div ref="el">
    <div v-for="s in slides" :key="s.id"><img data-bg :src="s.image" :alt="s.alt" /></div>
  </div>
</template>

Vue şablonlarında <insigne-slider> kullanmak için derleyiciye bunun bir custom element olduğunu söyleyin: compilerOptions.isCustomElement = (tag) => tag.startsWith('insigne-').

Svelte

<script>
  import { onMount } from 'svelte';
  import { InsigneSlider } from 'insigne-slider';
  let el;
  onMount(() => {
    const s = new InsigneSlider(el, { effect: 'fade' });
    return () => s.destroy();
  });
</script>

<div bind:this={el}>{#each slides as s (s.id)}<div><img data-bg src={s.image} alt={s.alt} /></div>{/each}</div>

Angular

Bileşene CUSTOM_ELEMENTS_SCHEMA ekleyin ve define()'ı bir kez çağırın (örneğin main.ts içinde); sonra şablonlarda <insigne-slider> yazın.

Sunucu tarafı render (SSR)

Paketi sunucuda içe aktarmak güvenlidir: define(), init() veya new InsigneSlider() çağırana kadar hiçbir şey window'a dokunmaz. Slaytları sunucuda çizin, slider'ı istemcide başlatın.

WordPress, Laravel, herhangi bir CMS

CDN script'ini ana şablonunuza ekleyin ve şablonlarınızdan data-insigne işaretlemesi üretin:

<div data-insigne data-effect="fade" data-autoplay="6000" aria-label="{{ $title }}">
  @foreach ($slides as $slide)
    <div>
      <img data-bg src="{{ $slide->image_url }}" alt="{{ $slide->alt }}" data-focus="{{ $slide->focus ?? '50% 50%' }}">
      <h2 data-in="lines-up">{{ $slide->title }}</h2>
    </div>
  @endforeach
</div>

CMS'inizde her görsel için bir odak noktası (iki sayı) saklamak, mobil için yapabileceğiniz en iyi tek şeydir.