Theming & CSS

Your slides are your HTML: style them with your own CSS, nothing to override. The slider's own controls (arrows, dots, pagination, autoplay button) live in a shadow root and are themed with custom properties and ::part().

<style>
  /* Theme from outside: custom properties and ::part() reach into the slider. */
  .brand {
    --ins-radius: 20px;
    --ins-arrow-bg: #121210;
    --ins-arrow-fg: #f3f1ec;
    --ins-dot-active: #c9a35b;
    --ins-accent: #c9a35b;
    --ins-focus: #c9a35b;
  }
  .brand::part(arrow) { border-radius: 12px; }
</style>
<insigne-slider class="brand" height="260" arrows="visible" pagination="dots" autoplay="4000">
  <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>

Loading preview…

Live previewEdit in playground →

Custom properties

Set them on the slider element (or any ancestor).

Property	Default	Affects
--ins-radius	0	Corner radius of the viewport
--ins-arrow-bg	rgba(255,255,255,.88)	Arrow background
--ins-arrow-fg	#14161c	Arrow icon
--ins-pag-fg	currentColor	Pagination outside the slides
--ins-dot-active	currentColor / #fff inside	Active dot
--ins-accent	currentColor / #fff inside	Progress bar, autoplay ring
--ins-focus	#4f7cff	Keyboard focus ring
--ins-dur, --ins-ease, --ins-ease-out	360ms, …	Control transitions

The pagination outside the slides uses the text color of the page (currentColor), so it follows your light / dark theme automatically.

Parts

Part	Element
viewport	The area the slides move in
arrow, prev, next	Arrow buttons
bar	The row holding pagination and the autoplay button
pagination	Dots / fraction / progress container
dot, dot-active	Individual dots
autoplay	Pause / play button

.my-slider::part(arrow) { border-radius: 10px; backdrop-filter: none; }
.my-slider::part(dot-active) { transform: scale(1.2); }

Classes on your slides

The slider adds state classes to your slides, useful for your own transitions:

Class	When
.ins-slide	Every slide
.is-active, .is-prev, .is-next	Relative to the current slide
.has-bg	The slide has a data-bg background
.is-thumb-active	Thumbnail of the main slider's current slide

On the slider element: [data-ins-ready] once started, [data-ins-motion] while the layer engine is active.