Photo Slideshow - endless loop [DEMO and SOURCE]

May 15, 2015

In my Next Level Design workshop I have a segment on thinking differently about design when using Storyline Layers. Before these sessions I take time to look at company websites of some of the participants and look for interactions or browsing experiences that can be recreated in Storyline.

This week a participant from City Furniture attended. On their site at the bottom of the page of each major category is an interactive photo slideshow that horizontally scrolls through 6 images, 3 at a time in an endless loop.

Inspiration

A little study and a couple hours later...

Demo

Source (Storyline 2)

Source (Storyline 3/360)

Setup:

6 images
12 layers
1 motion path per layer (12)
no variables
That's it!

Easy to re-use as a slideshow with 6 photo images. No need to change anything other than right-click on each image and "Change Picture..." Then redesign the slide to visually fit in your own projects.

Due to the Motion Path animation, this is only available in Storyline 2.

Finally, the "KEY" in the demo and source is of no value other than a way to keep track of the animation sequences while developing. Keep or delete as it has not affect on the interaction. I kept it in as it 'may' be of value in a future project.

Enjoy!

17 Replies

Ashley Terwilliger-Pollard
Staff

almost 9 years ago05/18/15 at 1:54 pm (UTC)

Thanks Kevin - really nice example of a slide show!

Michael Shannon

almost 9 years ago05/18/15 at 4:19 pm (UTC)

Nice work Kevin.

Leslie McKerchie
Staff

almost 9 years ago05/19/15 at 3:02 am (UTC)

Awesome. Thanks for sharing :)

David Anderson
Staff

almost 9 years ago05/22/15 at 4:31 pm (UTC)

Thanks for sharing this one, Kevin! I referenced it in today's challenge post: https://community.articulate.com/articles/image-sliders-galleries-in-elearning

Trina Rimmer
Staff

almost 9 years ago05/22/15 at 5:08 pm (UTC)

Well done, Kevin! Thanks for sharing it with the community. An elegant solution, for sure.

Kevin Thorn
Author

almost 9 years ago05/22/15 at 9:11 pm (UTC)

Thanks David and Trina! Probably my favorite all time way of presenting looping content - the slide show.

Charles Zoffuto

almost 9 years ago05/22/15 at 11:12 pm (UTC)

This is really great stuff Kevin. Thanks for sharing.

Lyn Plymyer

almost 9 years ago05/23/15 at 10:49 am (UTC)

Thank you Kevin for the inspiration and EASY solution!

Christie Pollick

almost 9 years ago05/26/15 at 5:28 pm (UTC)

Super cool, Kevin! Thanks for sharing. :)

Brian Allen
Hero

almost 9 years ago05/28/15 at 12:18 pm (UTC)

VERY nice, love the simplicity of the design, well done!

Margharita Nehme

almost 9 years ago05/28/15 at 1:40 pm (UTC)

Hi Kevin, love the image slider you created.

almost 7 years ago04/25/17 at 2:20 pm (UTC)

The link for the demo and source file are no longer valid. Do you have any way to restore? I'm trying to figure out how to make a carousel effect (using 360). Thanks!

Leslie McKerchie
Staff

almost 7 years ago04/25/17 at 3:15 pm (UTC)

Hello Laurie - This thread is a bit dated. Hopefully Kevin is still subscribed, but if you do not hear from him - you are welcome to reach out via the 'Contact Me' option on the user profile to see if this is a file he may still have.

You may find some helpful links here in the meantime. Any files you see for SL1 or SL2 can be upgraded for SL360.