Quick start

1. Add the script

<script type="module" src="https://slider.sadiksefa.com.tr/dist/insigne-slider.js"></script>

2. Wrap your images

Every direct child of <insigne-slider> is a slide. Plain images are enough:

<insigne-slider autoplay="5000" aria-label="Gallery">
  <img src="https://picsum.photos/id/1015/1600/1000" alt="Fjord">
  <img src="https://picsum.photos/id/1039/1600/1000" alt="Waterfall">
  <img src="https://picsum.photos/id/1044/1600/1000" alt="Coast">
</insigne-slider>

Loading preview…

Live previewEdit in playground →

That is a complete, responsive, accessible slider: swipe, keyboard, dots, autoplay with a pause button, and a height that follows the image ratio.

3. Put content on a slide

Mark the background with data-bg, then add any HTML on top. data-in animates an element when its slide becomes active:

<insigne-slider effect="fade" autoplay="6000">
  <div>
    <img data-bg src="hall.jpg" alt="Main hall" data-focus="40% 35%">
    <h2 data-in="chars-up">Opening night</h2>
    <p data-in="rise">Doors open at eight.</p>
  </div>
  <div>
    <img data-bg src="stage.jpg" alt="Stage">
    <h2 data-in="lines-up">The program</h2>
  </div>
</insigne-slider>

data-focus is the point of the image that must stay in frame — the slider never crops it away, on any screen.

4. Change behavior with attributes

Every option is an attribute in kebab-case:

<insigne-slider effect="cube" loop="rewind" pagination="fraction" arrows="visible" ken-burns>

The same options work as data-* on any <div data-insigne>, or as a JS object. See the options reference.

Next

• From simple to advanced: build a full hero step by step.
• Templates: copy a finished design.
• Playground: try everything live.