Troubleshooting

The slider has zero height

The slides have no background image and no content height — for example only absolutely positioned elements. Give it a height: height="480", aspect="16/9" or height="fill" with a CSS height on the element.

"cannot host a slider"

The element can't have a shadow root (ul, table, img…). Use a div, section, article or <insigne-slider>.

The WebGL effect plays as a CSS effect

One of: no WebGL, a low-power device or data saver (gpu: "auto"), reduced motion, or images on another domain without CORS headers. Serve images with Access-Control-Allow-Origin: * or set gpu: "prefer-webgl" to skip the low-power check.

Layers don't animate

• The element needs data-in; a typo in the recipe name is reported in the console.
• Reduced motion is on: layers appear without motion by design.
• layers: false disables the engine.

A watermark appeared

The credit is not visible. The console says why (covered, clipped, opacity, display:none…). Common causes: a fixed height with overflow: hidden on the slider's parent cutting the credit line (use height: "fill" so the credit is included), or an element positioned over it. See license & attribution.

Slides jump when the page loads

Reserve the space before images load: set aspect, or give the first image width and height attributes. Hide not-yet-started slides with the CSS in installation.

The image is cropped in the wrong place

Add data-focus (and if needed data-safe) to the background. On narrow screens the slider gets taller to keep wide photos readable; the focus point decides which part stays.

Content added later is not a slide

Direct children added later are picked up automatically. Content added deeper, inside a slide, needs nothing. If you replace the whole element, start a new slider on it.