The slider component allows 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.
These assets are automatically added as child components within newly created slides, 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
Lazy Load Slides: The number of slides that will be immediately loaded along with the one active.
Playback Settings: Options include Auto Start (slider initialization on banner loaded), Enabled (slider interaction activation), Shuffle Slides, and Loop.
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
Centered Slides: Align the active slide to the center.
First Active Slide: Choose which slide appears first as active.
Slides Per View: Determine how many slides are visible at once.
Gap: Set spacing between slides.
3. Slider Modules
Pagination: Enable navigation dots. When active, a list of customizable properties is available at the bottom of the right sidebar.
Transition Effect: Choose from multiple visual effects for slide transition.
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, measures, and position.
Interactions Tab
The interactions 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 event happens by selecting them from the 'Do Action' list.
Available slider interactions include the following list:
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 engaging ad experiences. Familiarizing yourself with its configuration options will allow you to fully unlock its potential within your campaigns.