Slideshow Element

Use the Slideshow element to present images and videos in a more immersive way, whether it's a product gallery or a bold hero section.

Start by defining the size of your slideshow. Set a custom ratio, a minimum or maximum height or let it fill the available space in the column. You can also adapt the slideshow height to the viewport, and even subtract the height above or a section below to create perfectly fitting hero slideshows.

Next, decide how visitors should navigate through the slides. Add dot navigation, a thumbnav, and an additional slidenav, place them inside or outside the slideshow, and show them only on hover if you want a cleaner look. The thumbnav gives a visual preview of each slide, supports custom thumbnail images, and can shrink automatically to stay in a single row.

Each slide can also show text overlays. Choose their position and style, define their width and spacing, and animate them independently to create anything from subtle captions to more editorial layouts.

Now bring the slides to life with motion. Choose from transitions like fade, scale, pull, or push, enable autoplay, adjust the speed, and add the Ken Burns effect for a more cinematic look.

You can even turn the slideshow into a scroll-based parallax effect with just a click and slide through the slides on scrolling, or move the title, meta, content, and link at different speeds while switching between slides.

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