CSS variables & parts
The controls live in a closed shadow root. Style them with custom properties and ::part(); style your slides with ordinary CSS. A full walkthrough is in theming.
Custom properties
| Property | Default | Description |
|---|---|---|
--ins-radius | 0 | Viewport corner radius. |
--ins-arrow-bg | rgba(255,255,255,.88) | Arrow background. |
--ins-arrow-fg | #14161c | Arrow icon color. |
--ins-pag-fg | currentColor | Pagination color when outside the slides. |
--ins-dot-active | currentColor (outside), #fff (inside) | Active dot. |
--ins-accent | currentColor (outside), #fff (inside) | Progress bar and autoplay ring. |
--ins-focus | #4f7cff | Focus ring. |
--ins-dur | 360ms | Control transitions. |
--ins-dur-fast | 160ms | Press / hover feedback. |
--ins-ease, --ins-ease-out | curves | Control easing. |
Set via options instead: arrowSize, arrowOffset (they become --ins-arrow, --ins-arrow-off).
Parts
| Part | Element |
|---|---|
viewport | Slide area |
arrow · prev · next | Arrow buttons |
bar | Pagination and autoplay row |
pagination | Pagination container |
dot · dot-active | Dots |
autoplay | Autoplay button |
css
insigne-slider::part(arrow) { width: 52px; height: 52px; border-radius: 12px; }
insigne-slider::part(dot-active) { background: transparent; }Selectors for your slides
.ins-slide, .is-active, .is-prev, .is-next, .has-bg, .is-thumb-active, and [data-ins-ready] on the slider. Layer split pieces: .ins-w (word), .ins-c (letter).