Examples
Adore Beauty - Desktop Topscroll
Adore Beauty - Mobile Topscroll
Advance Technology - Desktop Midscroll
Advance Technology - Mobile Midscroll
Format description and guidance
This template allows for the easy creation of a responsive "slider" style creative. The template allows two assets (image or video) to be uploaded, with an interactive (mouse hover / touch) sliding mechanic that moves the boundary between the two assets. An overlay image can be added on top, to add additional branding and messaging.
The template works across both desktop and mobile and can be used within most responsive formats, including Topscroll and Midscroll. The template is highly configurable, making it flexible with the way assets are positioned and scaled.
Format Specs
Backgrounds
As the banner template can be used within many different Adnami formats, the dimensions of assets will depend on the format the template is being used with. As a general guide, desktop formats typically use a 16:9 aspect ratio (eg 1920x1080), and mobile formats use a 9:16 (1080x1920).
For the two "Sliding" background assets, ensure they have matching dimensions, and are either JPG (image) or MP4 (video) file formats. There are several scaling modes to determine how the background assets will be responsively scaled - "Cover", "Contain", and "None". It is also possible to choose the "Position" of the Background assets, which can change the anchor point from which they scale.
Overlay
For the overlay asset, use a PNG with a transparent background. There are no strict requirements around the dimensions for the overlay, but as a rough guide, a square shaped overlay could be around 1000x1000px, a horizontal full-width overlay could be 2000x200px etc. Just ensure the resolution is sufficient to look good on the largest of screens.
It is possible to set the width, height, position & scaling mode of the overlay, allowing for a large number of configurations. It is also possible to add a background colour behind the overlay, incase a bit more visual separation is required. The "Overlay vertical gap" parameter controls how far away from the top/bottom the overlay is positioned when using a top/bottom position.
Asset Specs
Video (mp4 / VAST), optimized for web.
Images (jpg/png)
Click URL
Click tracking is included in the tag.
Recommended total weight
All assets together must weigh less than 3.5MB
Audio
No
Template Details
Automatically synced on 2026-02-11T14:27:19.506Z. This section documents the canvases, banner templates, and trafficking controls directly from the source configs.
Canvases: Desktop Topscroll, Desktop Midscroll, Mobile Topscroll, Mobile Midscroll
Banner templates: Responsive Slider Streaming Video
Use the tables below to configure the linked banner templates. Each parameter definition is pulled straight from the template config, ensuring the spec always documents the latest functionality.
Responsive Slider Streaming Video
A responsive slider format, for desktop & mobile · Version 1.2.2
General
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Click URL | Global click destination for the slider. |
Background Assets
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Background 1 (Image) | First background image. Add only an image OR a video for background 1. | ||
| Background 1 (Video) | First background streaming video. Add only a video OR an image for background 1. | ||
| Background 2 (Image) | Second background image. Add only an image OR a video for background 2. | ||
| Background 2 (Video) | Second background streaming video. Add only a video OR an image for background 2. | ||
| Scaling Mode | Sets how background assets scale. Cover fills and may crop. Contain avoids cropping but may leave space. None keeps original sizing. | cover | choices: cover, contain, none | |
| Anchor Point | Anchor Point used to position background assets within the slider area. | mid-center | choices: top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right |
Overlay
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Overlay Image | Image displayed above the backgrounds. | ||
| Overlay Scaling Mode | Sets how the overlay scales. Cover may crop, Contain avoids cropping, None keeps intrinsic size. | contain | choices: cover, contain, none | |
| Overlay Anchor Point | Anchor Point used to position the overlay within the slider. | mid-center | choices: top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right | |
| Overlay Width | Width of the overlay (supports %, vw, vh, px or 'auto'). | 60% | |
| Overlay Height | Height of the overlay (supports %, vw, vh, px or 'auto'). | 60% | |
| Overlay Background Colour | Background colour applied behind the overlay if not set to 'none'. | none | |
| Overlay Vertical Gap | Vertical gap between stacked overlay elements (if applicable). | 0vh |
Handle & Interaction
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Handle Icon | Image used for the draggable handle. | ./assets/HANDLEICON.png | |
| Handle Lock | Locks the handle so users cannot drag to reveal backgrounds. | Disabled | choices: Enabled, Disabled | |
| Reset on Mouseout | Resets the split position when the cursor leaves the banner area (desktop only). | Enabled | choices: Enabled, Disabled | |
| Split Direction | Sets whether the slider reveals left/right or top/bottom. | Horizontal | choices: Horizontal, Vertical | |
| Default Split | Initial percentage division between the two backgrounds (first-second). | 50-50 | choices: 0-100, 10-90, 20-80, 30-70, 40-60, 50-50, 60-40, 70-30, 80-20, 90-10, 100-0 |