Using Image Sliders and Photo Galleries in Online Courses #84
E-Learning Challenge #84: Challenge | Recap
Image sliders, slideshows, and galleries are an efficient way to present a large number of visual content (images, videos, and graphics) on the same slide while providing visual teasers of additional items.
Image Slider Layouts
While there are a variety of possible layouts, image sliders typically rely on horizontal rows of images or bullets. Let’s look at a few common image slider examples and navigation options.
Thumbnail Navigation Sliders
Scrolling thumbnail navigation provides teasers without showing everything at once. I really like this approach for keeping the learner engaged with the featured image while visually hinting at additional items.
Kevin Thorn recently shared an image slider template he built in Articulate Storyline 2. He includes his Storyline 2 source file so this is a great way to dive into infinite scrolling sliders.
View Kevin’s image slider in action
Bullet and Dot Navigation Sliders
Judge dot navigation by its size, do you? While dots and bullets may not always be the most visually engaging approach, they offer a great solution for keeping learners focused on the feature image and maximizing slide space.
Michael Hinze works a lot with sliders in Storyline. One of my favorite examples is his infinite scrolling slider where he leverages slide layers to transition images. Bookmark this one, folks!
View Michael’s image slider in action
Grid Navigation Sliders
Grid navigation displays every item on the same slide. Unlike the previous slider examples, the gallery doesn’t use pagination to reveal additional items.
And if you were thinking image galleries are only possible in Storyline, think again. The concepts are easily applied to PowerPoint-based authoring. Using hidden slides and hyperlinks, you can easily simulate the image slider effect.
Need additional thumbnails? Simply add dot navigation or pagination to the slide to display even more thumbnails.
View the video media gallery in action | Learn more about this project
Challenge of the Week
This week your challenge is to show and share an image slider for e-learning. You can focus on any style or layout you like. Just show us what you can do with image sliders!
Resources
Here are a few slider templates, tutorials, and resources to help you get started.
- Free Photo Slider for Storyline 2 by Richard Watson
- Photo Slideshow Slider by Kevin Thorn
- Building an Image Slider Interaction in Storyline by Michael Hinze
- Video Slider Carousel by Brian Allen
- How to pan the screen left and right using the mouse hover and motion paths by Charles Zoffuto
- 11 Free Tabbed Navigation Templates for Articulate Storyline
- Show Us Your Best Folder Tabs Interactions #2
Share Your E-Learning Work
- Comments: Use the comments section below to share a link to your published example and blog post.
- Forums: Start your own thread and share a link to your published example..
- Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
- Twitter: If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.
- Facebook: Share your work on our Facebook page by replying to this Facebook post with a link to your example.
Last Week’s Challenge:
Before you slide into this week’s challenge, take an animated look at the reaction GIFs your fellow community members shared in last week’s challenge:
E-Learning Challenge Recap #83: Challenge | Recap
Wishing you a slide-tastic week, E-Learning Heroes!
New to E-Learning Challenges?
The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.
382 Comments
The photo slide show concept is probably my favorite interaction to present looping content whether manual or auto animated. Here's another one modeled after the Cadillac CTS-V build-your-own website. This was the second ever project I built with Storyline 1 during the initial beta period. Unlike the furniture one David shared in the opening of this post, this one uses layers only so can be repurposed in SL1 or SL2. Not at my computer at the moment but will share the SL1 and SL2 source files later. https://s3.amazonaws.com/DEMOS/slideshow_manual-advance_CTS-V/story.html Source: Storyline 1 > https://s3.amazonaws.com/DEMOS/slideshow_manual-advance_CTS-V/source/slideshow_manual-advance-thru-layers_CTS-V_SL1.story Source: Storyline 2 > https://s3.amazonaws.com/DEMOS/slideshow_... Expand
Hello everyone! My name is Jane Maduke and this is my first eLearning Challenge! I've been lurking for a couple of weeks and finally jumped into this one, not least because I wanted to show off some of my photos! I also resisted looking at too many of your wonderful samples. They tend to make me second-guess myself. Best just to jump in without looking! Thank you all for your inspiration and generosity! I can't wait to do more challenges. http://www.larchlearning.com/articulate-elearning-challenge-84/ One week later, I got this to work the way I wanted it to! Yay! Here's my new slider: http://www.larchlearning.com/wp-content/uploads/articulate_uploads/2015-05-29-ImageSlider2/story.html And here's the Story file for those who would like to reverse engineer it: https://dl.dr... Expand