How to Build a Rotating Video Carousel in Articulate Storyline

Three videos. Click a side tile and the whole set glides across, the outer tiles scaling and blurring back into depth. It loops in both directions and never dead-ends.

Try the live demo first. Then here is how it goes together.

The videos stay in Storyline

They sit on three slide layers, Vid01, Vid02 and Vid03, as ordinary Storyline video. That matters. You keep your seekbar, your accessibility settings and your normal publish pipeline. Swapping in your own footage is just right click, Change Media.

The carousel is a web object

A small folder of HTML, CSS and JavaScript sits on top and draws the three tiles. The front tile lines up exactly behind the real video, so what learners click is Storyline, not a picture of Storyline.

The look and motion live in one file

Open config.js in Notepad. Tile size, swing distance, tilt, blur, fade, speed, play button colour and background are each one line with a plain-English comment. Change a number, save. There is no code to write.

The folder rule nobody expects

This is the step that may trip up almost everyone. Storyline copies the web object folder when you insert it, so pointing it back at the same folder shows you the old version no matter how many times you save. Rename the folder, repoint the web object at the new name, then publish.

Why it looks blank in Preview

Web objects do not render in Storyline Preview. You have to publish to see the carousel run. This is normal Storyline behaviour and nothing is broken.

See it running

Open the live carousel demo and click the side tiles to feel how the motion reads.

Watch the full tutorial on YouTube for the complete build, or get the template and skip straight to customizing it.