Navigation & autoplay

<style> .row { display: grid; gap: 22px; } </style>
<div class="row">
  <insigne-slider height="200" arrows="visible" arrows-position="bottom-right" pagination="fraction" pagination-placement="inside">
    <div><img data-bg src="https://picsum.photos/id/1018/1200/600" alt=""></div>
    <div><img data-bg src="https://picsum.photos/id/1036/1200/600" alt=""></div>
    <div><img data-bg src="https://picsum.photos/id/1043/1200/600" alt=""></div>
  </insigne-slider>
  <insigne-slider height="200" arrows="visible" arrows-placement="outside" pagination="progress" pagination-placement="outside" autoplay="3000">
    <div><img data-bg src="https://picsum.photos/id/1050/1200/600" alt=""></div>
    <div><img data-bg src="https://picsum.photos/id/823/1200/600" alt=""></div>
    <div><img data-bg src="https://picsum.photos/id/1039/1200/600" alt=""></div>
  </insigne-slider>
</div>

Loading preview…

Live previewEdit in playground →

Arrows

Option	Values	Default
arrows	hover (on pointer devices when hovered, always on touch), visible, hidden	hover
arrowsPlacement	inside, outside	inside
arrowsPosition	sides, bottom-left, bottom-center, bottom-right, top-right	sides
arrowSize, arrowOffset	px	44, 16

Arrows are disabled at the ends when loop is off, and mirrored in right-to-left layouts.

Pagination

pagination	Looks like
dots	Dots; beyond 7 slides they turn into a sliding, scaled window.
fraction	03 — 12
progress	A thin progress bar across the whole slider.
none	Nothing.

paginationPlacement: inside (over the slides) or outside (below).

Thumbnails

Make any second slider the thumbnails of the first:

<insigne-slider id="main" thumbs="#thumbs">…</insigne-slider>
<insigne-slider id="thumbs" slides-per-view="5" space-between="8" pagination="none" height="80">…</insigne-slider>

Clicking a thumbnail moves the main slider; the active thumbnail gets the is-thumb-active class.

Autoplay

<insigne-slider autoplay="5000">          <!-- or: autoplay autoplay-delay="5000" -->

Option	Meaning
pauseOnHover	Pause while the pointer is over the slider or it has keyboard focus (default on).
stopOnInteraction	Stop for good after a swipe, arrow or dot click.
reverse	Play backwards.
stopOnLast	Stop at the last slide (when not looping).
autoplayProgress	A ring around the pause / play button (default on).

Autoplay always pauses when the slider is off screen or the tab is hidden (pauseOffscreen), and never runs under reduced motion. The pause button satisfies WCAG 2.2.2 (pause, stop, hide).

Keyboard, wheel, deep links

• keyboard (on): arrow keys, PageUp/PageDown, Home/End while the slider has focus.
• mousewheel (off): wheel and trackpad. At the ends the page scrolls on.
• hash (off): #gallery-3 opens slide 3 and the URL follows the slider.

Loop

loop: "loop" (default) is endless without cloned slides — the DOM is never re-ordered. "rewind" jumps back to the start; "off" stops at the ends with a rubber-band edge (resistance).