Using Image Sliders and Galleries in E-Learning #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.

Image Slider Layouts

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.

Thumbnail Navigation 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!

Bullet and Dot Navigation Sliders

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.

How I Built This Video Gallery Interaction

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.

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:

RECAP #83: Reaction Gifs

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.

 

385 Comments
Kevin Thorn

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

Phil Mayor
Nancy Woinoski
Kevin Thorn
Jane Maduke

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

David Anderson
Jane Maduke
Jane Maduke
Jackie Van Nice
Jaipreet singh
Linda Lorenzetti
Jaipreet singh
Jackie Van Nice