Using Image Sliders and Galleries in E-Learning #327

Image Sliders and Photo Galleries #327: 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 various 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

Linear Image Gallery

Here's an excellent example from Richard of how motion paths can be used to create image sliders. He also added triggers to each image to reveal additional content.

Linear Image Gallery

View and download the image slider

Tab-Style Image Sliders

I like the way Montse used a cover masking effect to hide part of the animated images. You can download the interaction to see how she put it together.

Grid Navigation Sliders

View and download the photo slider

Challenge of the Week

This week, your challenge is to create an image or photo gallery slider for e-learning. You can focus on any style or layout you like. Just show us what you can do with image sliders!

Areas of focus for this technque:

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.
  • Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

To help you slide into this week's challenge, check out the interactive math examples your fellow challengers shared over the past week:

Teaching Math Online with E-Learning Activities #326

Teaching Math Online #326: Challenge | Recap

New to the E-Learning Challenges?

The weekly e-learning 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.

91 Comments
Jodi M. Sansone
Ron Katz
Kimberly Eng
Angela Walsh
Jonathan Hill
Jodi M. Sansone
Sharon Stahrfisher
David Anderson
Carrie Gauthier
Susan Schleef
David Anderson
David Anderson
David Anderson

Your approach totally works but it does create some duplicate work. The three biggest changes I made: 1) renamed motion paths (left, right) to make it easier to identify the paths 2) grouped all four images to eliminate the need for more than two paths 3) added relative start point for the motion paths 4) created a single number variable to count the number of clicks left and right to control button visibility The 4th change I'd recommend making is to resize the stock photos to a smaller size. I'm guessing you inserted the images from Content Library. The source size of the images is really large and slows things down a little in Storyline. It's not an issue when you publish because Storyline will resize the images. But in the authoring view, the images take additional resources. ... Expand

joel colley
Charlie House
David Anderson