Slideshow
Slideshow is the SalonEngine layout that shows your content one frame at a time. Each block becomes a slide, and visitors move through them with arrows, dots, thumbnails, autoplay, or a click. It's ideal for hero galleries, portfolios, and full-bleed image or video sequences.
Slideshow supports image, text, and video blocks as slides. Page blocks are never shown as slides.
Add a slideshow
- Add a section, or select an existing one.
- In the Section panel, open the Layout sub-tab and choose Slideshow.
- Add blocks — drag images straight onto the section, or use the editor toolbar. New uploads are added as image slides.
By default new blocks are added to the top of the slideshow.
Display
In the Layout sub-tab, Display Settings controls how each slide fills the frame:
| Option | Behavior |
|---|---|
| Perfect Fit | Shows the entire image, letterboxed if needed. |
| Fill | Crops the image to fill the section edge-to-edge. |
The same setting applies to video slides.
Section height
Set the slideshow's height with the Section Height control: 100%, 75% (default), 50%, or 33% of the viewport. Use the gear button for a custom height.
Autoplay
Turn on Autostart slideshow under Autoplay to advance slides automatically. The slideshow always loops back to the start.
- Slide Duration — how long each slide is shown: 1s, 1.5s, 2s, 3s, 4s (default), 5s, or 10s.
- Slideshow Start — begin on the First Slide or a Random Slide each time the page loads.
Transitions
Transition Type sets how slides change:
- Crossfade (default) — slides dissolve into each other.
- Slide — slides push across horizontally.
- None — instant cut.
When the transition isn't None, Transition Duration sets the animation length. It must be less than 50% of your slide duration — longer options are disabled automatically, so a fast slide duration limits how slow the transition can be.
Navigation
Under Slideshow Controls, pick how visitors move between slides:
| Control | What visitors see |
|---|---|
| None | No on-screen controls. |
| Arrows (default) | Left/right arrows appear on hover, on the side the cursor is nearest. |
| Dots | Clickable dots along the bottom. |
| Thumbs | A scrollable strip of slide thumbnails below the slideshow. |
Click behavior
Turn on Click on Slideshow to make clicking (or tapping) the slide do something, then choose a mode:
- Advance — go to the next slide.
- Play/Pause — pause or resume autoplay (a play/pause icon shows on hover).
- Link — open one link you set for the whole slideshow (use Set link / Edit link).
- Follow link — open the link on the current image; slides without a link advance instead.
Turning Click on Slideshow off makes the slides non-clickable.
Video in slideshows
Video blocks work as full slides. When you move to another slide, the video on the previous slide is paused automatically so audio doesn't keep playing in the background. Thumbnails use the video poster (YouTube and Vimeo posters are supported).
For more on adding video, see /docs/en/blocks/video.
Captions
Turn on Show captions to display each image's caption beneath or above the slide:
- Position — Above or Below the image.
- Alignment — Left, Center, or Right.
Captions are pulled from each image's own caption text. Edit them on the image block itself.
Choose which blocks appear
Show in Slideshow lets you toggle whole block types on or off as slides — Images, Text, and Video — without deleting anything. Hidden types simply don't appear as slides.
Going live
Slideshow settings save as you edit. When you're done, click Stop Editing (top bar) or the Preview pencil icon in the floating toolbar to leave edit mode. Leaving edit mode clears the cache so your changes go live.
Related
- /docs/en/layouts — overview of all SalonEngine layouts
- /docs/en/blocks/image — image blocks and captions
- /docs/en/blocks/video — video blocks