Frameworks & CMS

Insigne Slider keeps your slides in your DOM and projects them through a shadow-root slot. Frameworks keep ownership of their nodes, so there is no wrapper package to install.

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="Featured">
      {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>
  );
}

Adding or removing items in slides refreshes the slider automatically. With React 19 you can also use the element directly: <insigne-slider effect="fade">…</insigne-slider> after calling define() once.

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>

To use <insigne-slider> in Vue templates, tell the compiler it is a custom element: 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

Add CUSTOM_ELEMENTS_SCHEMA to the component and call define() once (for example in main.ts), then write <insigne-slider> in templates.

Server-side rendering

Importing the package on the server is safe: nothing touches window until you call define(), init() or new InsigneSlider(). Render the slides on the server, start the slider on the client.

WordPress, Laravel, any CMS

Add the CDN script to your layout and output markup with data-insigne from your templates:

<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>

Storing a focal point per image (two numbers) in your CMS is the single best thing you can do for mobile.