Parallax Carousel

Adventive has two ways to integrate parallax functionality into your ad unit – Parallax Animations and the Parallax Carousel component. 




This article will go over the Parallax Carousel component of the builder.  The Parallax Carousel Component can be added to any type of Format.


Product/Fashion Example

Automotive Example

Fashion Example

Fashion Example 2

Product Example

From the Components dropdown menu, select Parallax Carousel:

A Parallax Carousel area will display to the right in the builder.


Adding Assets

Click in the “Select Asset” field and the Assets screen will show, allowing you to select an asset to upload.  Select the image, then select “Insert”.

To add more images (you can add up to 40), click on the + button.  A new “Select Asset” field will appear just below the previous asset you uploaded:



Parallax Height: Select in pixels or percentage length of parallax animation (good starting point is height of the ad unit. It will depend on how many images you want to slide through before the ad is out of view.  ie. if your ad is 600px height and you want 12 images to scroll, you may need to set the height taller so the scroll is faster/all images are seen).

Transition speed:  If you want a Fade in/out on each image - click into this field and enter in milliseconds the speed.  It will apply to each image in the carousel.


Custom Trigger:  If selected, a page position selection can be made:

Page Position: Select the page position in percentage or pixels.  i.e. if you plan to run this ad 70% from the top of your site, you can set this as the custom trigger page position.


Changing the order of Assets:

You can change the order of your your assets if needed.  Click on the lines icon   located above the asset you want to move – you’ll notice your pointer will change – click and drag the asset to where you would like to place it.



After (i.e., moved frame-3 image above frame-1 image):


Replacing an Asset(s):

You can replace an asset by clicking within the field (with the image name) and the Asset screen will display for you to insert a new image.


Deleting an Asset(s):

To delete an asset, click the black X just above its name.


Parallax Carousel will do the rest of the work for you!


Save the ad.

Go to the Preview icon  to view the ad.