Slider allow you to showcase a sequence of visuals or videos inside a single creative space, making them ideal for flyers, showcases, or carousels. Slider is foundational for building dynamic Aryel ads.
Adding a Slider
You can add a Slider either via the toolbar or from the left sidebar. Once inserted into the page, you'll find the new component listed under the Layers section.
Click the slider row to access its specific settings.
One of the unique features of the slider component is the arrow icon next to its name in the Layers panel. Clicking it will open a dedicated view that allows you to bulk-upload images or videos.
These assets are automatically added as child components within newly created Slide components, which are in turn nested under the main Slider.
Right Sidebar Configuration
When the slider is selected, the right sidebar updates with dedicated settings split into two main tabs: Design and Interaction.
Design Tab
1. Slider Options
Lazy Load Slides: Delay loading heavy assets (images/videos) for better performance.(quante slide caricare subito)
Playback Settings: Options include Auto Start, Enabled, Shuffle Slides, and Loop.
Direction: Choose between vertical (for flyers or showcases) or horizontal (for carousels).
Transition Duration: Set the transition speed in milliseconds.
Transition Animation Type: Define the style of slide easing.
2. Slides Options
First Active Slide: Choose which slide appears first both in the canvas and in the preview.
Slides Per View: Determine how many slides are visible at once.
Gap: Set spacing between slides during transitions.
Centered Slides: Align the active slide to the center.
3. Slider Modules
Pagination: Enable navigation dots.
Transition Effect: Choose from multiple visual effects.
Autoplay Settings: Set whether autoplay is active and the delay time before starting.(in seconds)
4. Styles
This section includes all style controls (typography, padding, borders, etc.), consistent across all components. This section is based on standard CSS structures — for more information, click here.
5. Slider Pagination (if activated)
If pagination is enabled, scroll to the bottom of the right sidebar to access styling options for its appearance, including color, shape, and position.
Interaction Tab
The interaction tab allows you to add behaviors based on user actions. You can define what happens when users engage with the slider in various ways. For each interaction, you can assign elements and define their behavior when the condition is met.
Available slider interactions include:
These can be used to trigger animations, show/hide components, track events, and more.
The slider is a cornerstone component of Aryel creatives. Its powerful layout flexibility, combined with visual and interactive settings, makes it an essential tool for building immersive ad experiences. Familiarizing yourself with its configuration options will allow you to fully unlock its potential within your campaigns.