Insigne Slider · an alternative to Swiper and Slider Revolution
Slides that keeptheir composition.
Responsive without breakpoints, images that never cut their subject, cinematic layer animations. As a web component, with HTML attributes or from JSON. 45 KB.
Three ways in. One vocabulary.
Write a web component, decorate plain HTML with data attributes, or hand it JSON from your CMS. The option names are identical everywhere, so what you learn once works in every stack.
<insigne-slider effect="fade" autoplay="5000" ken-burns>
<insigne-slide bg="hall.jpg" alt="Main hall" focus="40% 35%">
<h2 data-in="lines-up">Opening night</h2>
</insigne-slide>
<insigne-slide bg="stage.jpg" alt="Stage"></insigne-slide>
</insigne-slider><div data-insigne data-effect="fade" data-autoplay="5000" data-ken-burns>
<div>
<img data-bg src="hall.jpg" alt="Main hall" data-focus="40% 35%">
<h2 data-in="lines-up">Opening night</h2>
</div>
<div><img data-bg src="stage.jpg" alt="Stage"></div>
</div>import { InsigneSlider } from 'insigne-slider';
InsigneSlider.create('#hero', {
effect: 'fade',
autoplay: 5000,
kenBurns: true,
slides: [
{ bg: { src: 'hall.jpg', alt: 'Main hall', focus: '40% 35%' },
layers: [{ tag: 'h2', text: 'Opening night', in: 'lines-up' }] },
{ bg: { src: 'stage.jpg', alt: 'Stage' } },
],
});The subject stays in frame.
Every other slider centers a background and hopes. Mark a focal point or a safe area and Insigne keeps it visible at any ratio — zooming out and filling the gap with a blurred copy only when it has to. Drag the ratio.
Typography with timing.
Slider Revolution-grade entrances without the editor: add data-in to any element. Text splits by line, word or letter; every recipe is data you can tune or replace.
Built like a product, not a plugin.
The parts you only notice when they are missing.
Follows the finger
A continuous position model: every effect — cube, flip, masks, WebGL — scrubs with the drag and releases with your momentum.
Responsive by container
Breakpoints read the slider's own width. minSlideWidth picks the column count, the height follows the image.
Real images
Backgrounds stay <img> and <picture>: alt text, srcset, lazy loading and no layout shift.
Loads what it uses
WebGL, layers, particles and overlays are separate chunks fetched only when a slider asks for them.
Accessible by default
Carousel roles, a polite live region, inert off-screen slides, keyboard control, pause button, reduced motion.
Framework friendly
Slides stay in your DOM (projected through a slot), so React, Vue and Svelte keep ownership of their nodes.
Measured, not claimed.
Sizes are gzip, measured on 19 October 2026 from the published files (Swiper 14.3.0).
| Insigne Slider | Swiper | Slider Revolution | |
|---|---|---|---|
| Price | Free, visible credit | Free (MIT) | Paid, per site |
| Runs on | Any site, any framework | Any site | WordPress only |
| JS + CSS, full feature set | 45 KB core (+9 KB layers, +8 KB WebGL when used) | 46 KB bundle | ~240 KB uncompressed (core + GSAP tools) + jQuery |
| Layer / text animations | 30 recipes, split text | Parallax only | Editor |
| WebGL transitions | 13, free | Paid (separate products) | Add-on |
| Focal point & safe area | Yes | No | background-position |
| Responsive without breakpoints | Yes | Manual breakpoints | 5 device layouts by hand |
| Loop without cloning slides | Yes | Re-orders DOM | Yes |
| Configure with HTML / JSON / JS | All three | JS, element attributes | Editor JSON |