Creating a slider is an effective way to display a sequence of content within a designated container, allowing you to convey information, tell a compelling story, or showcase a collection of items in a visually engaging and organized manner.
Here's a step-by-step guide on how to set up your first slider:
Add a Slider
Open the 'Add' menu in the editor by clicking the '+' icon.
Search for 'Slider'.
Select it from the menu.
Click or drag it onto the canvas to add it to your project.
Editing a Slider
A Slider displays portions of the content one at a time, concealing the remaining content until you switch to another view (slide) within the same container. To make changes to these slides, you must enter Slider edit mode to access the various views within your Slider.
In the following sections, we'll cover the various methods for entering and exiting the Slider and explain how to add and edit the content within your Slider.
Enter edit mode
You can enter the edit mode of your slider in several ways:
Double-click on the slider on the canvas.
Click the 'Edit' button in the left layer panel.
Click 'Edit Content' from the Properties tab.
Right-click on your slideshow and choose 'Edit Slider'.
In edit mode, the layers panel on the left will display the layers within the slider, and the canvas will emphasize the slider container.
Adding content
While in edit mode, you can add or edit slides and content to your slider:
Start with the automatically added initial slide.
Add or edit content to your slide just as you would design elements outside of the slideshow.
To include more slides, use the 'Add New Slide' button at the bottom of the layer panel or the '+' icon in the top right corner of the layers panel.
Adjust the slide order by dragging and dropping them in the layers panel.
Preview the slide you're working on by clicking the preview button.
Exiting edit mode
To exit edit mode, use one of these methods:
Double-click anywhere outside the slider container.
Click the 'Close' button in the top right corner, where you'd typically find the publish button.
Click the 'Layers' path in the top left of the layer panel.
Press the 'esc' key on your keyboard.
Upon exiting edit mode, the layers panel will revert to displaying all layers on your page, and the canvas will return to its usual appearance.
Adjusting slider properties
Select the slider and click the 'Properties' tab (make sure you're not in slider edit mode). From the properties tab, you can customize various settings, including:
Animation:
Slide (default)
Zoom (with scaling options)
Fade
3D (with gap and perspective settings)
Animation duration
Direction
Randomize
Infinite (enabled by default)
Adding slider interactions
To control the slider's navigation, you'll need to set up interactions. Slider-specific actions include:
Go to the next slide
Go to the previous slide
Go to a specific slide
These actions can be triggered in different ways, such as by clicking or auto-playing based on a timed trigger. Learn how to set up these interactions in our detailed guide.