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.

 

381 Comments
John Bellotti
David Anderson
Ajay Gupta
David Anderson
David Anderson
Daniel Sweigert