Supercharge your creative with slideshows! Perfect for shoppables, image galleries, real estate, and more!
Resources:
Explore our Ad Gallery for examples of this component
In this article, you will learn:
How to add the Slideshow component
How to configure the Slideshow component Properties
How to modify the design of the Slideshow
How to modify the transition settings of the Slideshow
How to to add the Slideshow component
Below you will find a step-by-step process to configure the Slideshow component
- Choose the ad format and dimensions of the ad unit you wish to add the Image Slideshow component to. For guidance on building specific formats, check out this article.
- From the left menu, select the components icon
, Slideshow
- Once the Slideshow component is added to the canvas, you can begin configuration using the right hand component configuration Build menu:
How to configure the Slideshow component properties
The Slideshow component properties configuration options are explained below:
The slideshow component allows for an unlimited number of slides.
To add additional slides, click the 
icon, to remove, click the 
icon.
To reposition slides, click and drag the slide with the 
icon.
| Name | Define a name for the slideshow. This will be used in analytics |
| Source |
Select the source of the assets that would like in the slideshow. Sources include an Uploaded Asset (images or video), and YouTube (video) |
| Asset | The asset file to be used in the slideshow. This may include a image file or video* selected from the Asset Manager, or a YouTube URL or YouTube ID |
| Log Name | An identifier, or name for the asset that will be used in analytics |
| Click URL | The URL that will be opened in the users browser when the specific asset in the slideshow is clicked |
| Open In | By default, when the user clicks on a slideshow asset, a new tab will open, however, you may select Same Tab to open the destination URL in the browser tab currently in focus |
| Caption | When checked, you can enter a text caption that will be displayed along with the image |
| Visible | By default, Visible is checked indicating this particular asset will be visible to the user during ad serving. When unchecked, the specific asset will be hidden from the user |
When a video asset is added to a slideshow, additional options will be available for configuring the player by clicking the 
icon.
Please refer to the video player component article for instructions on configuring the player.
How to modify the design of the Slideshow
The Slideshow component design properties are explained below:
- Click the Design tab at the top of the Slideshow properties menu.
| Content | |
| Display | By default, images will fill the component area |
| Pagination | |
| Display | By default, pagination is disabled. Optionally, you may choose Always, or On Hover. Additional menu options are available if pagination is enabled |
| Format | Choose from dotted pagination, or thumbnails* |
| Placement | Placement of the pagination, top or bottom |
| Size | Size of the pagination, small, medium or large |
| Container | The color of the pagination container |
| Active Thumbnail | The color of the Active Thumbnail |
| Arrow Color | The color of the pagination arrows |
| Opacity | The opacity of the pagination container |
| Arrows | |
| Display | By default, arrows will display on hover. You may also choose Always to display the arrows at all test, or Never to hide the arrows. |
| Style | By default, arrows will be placed on the left and right side of the slideshow. You may also choose Custom to upload custom arrow icons, or choose Hitbox if you would like to place arrows elsewhere on the slideshow |
| Size | The size of the arrows: small, medium, or large |
| Color | The color of the arrows |
| Opacity | The opacity of the arrows |
| Captions | |
| Font | Captions (if enabled on the slide) will be displayed in the selected font |
| Size | Font size measured in Pixels |
| Color | Font Color |
| Style | Optional styling for captions, including Bold, Italicize and Underline |
| Layout | Positioning of the captions, including bottom, top, and middle |
When thumbnail is selected as a pagination option, within the build section of the menu, a thumbnail editor will be visible. Click Edit to modify the thumbnail.
How to modify the transition settings of the Slideshow
The Slideshow component transition settings are explained below:
- Click the Settings tab at the top of the Slideshow properties menu.
| Slides | |
| Per Display | By default, the number of assets to display in the slideshow is set to 1. You can modify this setting to display additional assets at the same time |
| Per Transition | By default, the number of assets to transition when utilizing the manual navigation arrows, or automatic transition is set to 1. You can modify this setting to transition additional assets at the same time |
| Transitions | |
| Transitions | By default, transitions between slides is set to Automatic. Modifying the transition setting to manual the user must utilize the navigation arrows to transition between slides |
| Pause on hover | When selected, transitions will pause if the user hovers over the slideshow with the cursor |
| Duration | The time between transitions, measured in seconds |
| Effect | The transition effect, slide, fade, or scale |
| Speed | The transition speed, measured in seconds |
| Loop | By default, the slide transitions will loop indefinitely, unchecking this option will pause the transitions once reaching the last slide |
| Randomize Slides | Randomize the order to the slides |