The image slideshow is a great invention made to showcase more image assets on your page without taking up additional real estate.
👍🏽 Adding a slideshow
As an Element
From the top menu bar, click on the Add Menu (
Shortcut: M)Search for and select Slideshow
Click and drag the element onto your canvas
As a Section
From the top menu bar, click on the Add Menu (
Shortcut: M)In Sections, search for and select Slideshow
Select Slideshow then press Alt (windows) or Option (Mac)
Insert the section by clicking Add section here
Uploading an Image
Double-click the slideshow
Click the Add icon (+)
Select Add image or choose an image from one of our free stock images libraries
🎨 Styling a slideshow
Spacing top: Add padding to the top of the Slideshow section in pixels or % to keep spacing between sections
Spacing bottom: Add padding to the bottom of the Slideshow section in pixels or % to keep spacing between sections
Width: The width of a Slideshow section can't be altered, it'll always be set to cover the 100%
Height: Set the height of the Slideshow section in Pixels, % or set it to Auto so that it grows as you add content to it
Min H: Sets the minimum amount of height pixels a Slideshow section can be. A red stippled horizontal line inside your section will reflect the minimum height
Clip content: Toggle to hide the content that goes beyond the section's edges
Resize to fill vertically: Click to set the section's height to 100%
Background:
Arrows: Change the arrow's background-color
NA: Change the background color of the navigation buttons
Selected NavBTN: Change the background color of the active navigation button
Hover NavBTN: Change the background color of the navigation button on hover
Text: Change the arrows' size and color
Margin: Add margin to both arrows and navigation buttons
Padding: Add padding to both arrows and navigation buttons
Border: Set a border color, opacity, and line weight for both arrows and navigation buttons
Border Radius: Curve the radius of the border of both arrows and navigation buttons
Effects: Add different types of shadows or blur effects to both the container and the navigation buttons
Opacity: Set the opacity for the container, arrows, and navigation buttons
Icons:
Set custom shape: Replace the arrow icon with a shape or a custom SVG
Set custom image: Replace the arrow icon logo with an image
⚙️ Configuration Options
Once you've added the Slideshow to your canvas, it's time to upload your image assets and adjust the configurations.
To start, double-click the element to open the configuration options.
Parameter | Description |
Images | Add and arrange the sequence of your slideshow images. |
Transition Animation | The animation used to transition between the sequence of images when the slideshow is playing. |
Hide dots | Optionally show or hide the navigation dots from the slideshow layout. |
Hide arrows | Optional show or hide the previous/next arrows from the slideshow layout. |
Add timer | Turns on autoplay - automatically skip to the next slide in the slideshow after a specified interval. |
Time in seconds | The interval used to control the speed of the slideshow when autoplay is activated (when the add timer option is turned on). |