Overlay Slider Element

The Overlay Slider presents images and videos as full-bleed slides with layered content, making it ideal for portfolios, case studies, and product showcases.

Each slide can combine an image or video with title, meta, text, and links. Use overlays to reveal content directly on top of the visuals while keeping the focus on the media.

Show different images or videos on hover to make your slides more interactive.

Control how users navigate your content. Scroll through slides one by one, in sets, or use center mode to highlight the active slide. Add a dot navigation or previous/next arrows and control their position, visibility, and breakpoint.

Choose a fixed width for all items or let each item expand to the width of its content.

You also have precise control over the layout. Set the height to fill the available column space, take a percentage of the viewport height, or subtract the header height automatically.

For more immersive experiences, enable scroll-based parallax. Users can move through slides by scrolling instead of clicking. This is especially powerful when combined with sticky columns creating a stunning scroll-driven effect.

Overlays can also appear on hover or on active state, creating progressive reveal effects as users explore the slider.

Add visual depth with blend modes, allowing overlay text to merge with background media. You can also recolor images and videos globally using background colors or gradients for a cohesive visual look.

TODO: And builder elements like slideshows and sliders even preload adjacent images automatically, so browsing through slides still feels instant.