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.
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.
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.
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!
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:
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.