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 Interactions.
Design Tab
1. Slider Options
Playback Settings: Options include Auto Start (slider initialization on banner loaded), Enabled (slider interaction activation), Shuffle Slides, and Loop.
Free Mode: When this option is enabled, the slider no longer snaps automatically to center individual slides. Instead, it remains positioned exactly where the drag action is released, providing a smoother and more natural manual scrolling behavior.
Inertia: Available only once Free Mode is enabled, this setting lets you decide whether to apply inertia to the slider. When activated, the slider continues moving after the drag is released, simulating natural momentum. The extent of this movement varies according to the intensity of the user’s swipe.
Free Mode and Inertia can be activated independently of the transition effect assigned to the slider.
Lazy Load Slides: The number of slides that will be immediately loaded along with the one active.
Direction: Choose between vertical (for flyers or showcases) or horizontal (for carousels).
Transition Duration: Set the slide 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.