Introduction

Insigne Slider is a slider and carousel library for any website. It is small, needs no configuration to look right on every screen, keeps the subject of your photos in frame, and brings layer animations and WebGL transitions that usually live in paid plugins.

What you get

• Three ways to use it, one vocabulary. A web component (<insigne-slider>), plain HTML with data-* attributes, or JavaScript / JSON. Every option has the same name in all three.
• Responsive without breakpoints. The height follows the image ratio (a little taller on phones), minSlideWidth decides the column count, and breakpoints — when you want them — read the slider's width, not the window's.
• Smart fit for background images. A focal point and a safe area keep faces and products visible at any aspect ratio. Backgrounds stay real <img> / <picture> elements: alt text, srcset, lazy loading.
• Layers and typography. data-in="chars-up" on any element. Split text by line, word or letter, with 30 ready recipes and your own.
• 40 transitions. 27 CSS effects (fade, cube, coverflow, cards, masks, glitch…) and 13 WebGL shaders, all draggable.
• Small. 45 KB gzip for the core with navigation, autoplay, accessibility and all CSS effects. WebGL, layers, particles and overlays load only when a slider uses them.

How it works, in one paragraph

Each slider renders its viewport, arrows, pagination and credit in a closed shadow root and projects your slides into it through a <slot>. Your slides never move in the DOM, so frameworks keep ownership of them. Every slide is positioned from one continuous number, which is why every effect follows the finger and why loop mode needs no cloned slides.

Where to go next

• New here? Start with the quick start.
• Choosing between the three APIs? Read web component, data attributes and JavaScript & JSON.
• Coming from another library? See migrating from Swiper or from Slider Revolution.
• Looking for an option? The options reference is searchable.

License in one line

Free for any use, including commercial projects, as long as the small "Slider by sadiksefa.dev" credit stays visible — or a link to sadiksefa.dev appears elsewhere on the page. Details.