Handling image slider navigation with a lot of images

Question

What's a better way to handle navigation in a slider with a lot of images?

I'm currently working on the behaviour of an image slider. The image slider will look like the wireframe in the image below.

The user can choose to have either small circles (left) or thumbnails (right) as navigation and indicators of the current image.

This is fine for small lists of images (4 or less), but I'm struggling with the navigation when there are a lot of images.

Based on the above navigation patterns it would look something like this. There will be a lot of circles in a row. I'm focused on the circles. I've worked out the thumbnails already. They are easier to navigate and find because they show the image.

It's hard to navigate. For example, users have to count the number of circles if they want to see an image again later.

I've thought of a few ways to make the row of circles easier to understand.

• Replace the circles with numbers. (left image below)
• Have 'pages' of circles. (right image below)

I'm not happy with the result yet.

What's a better way to handle navigation in a slider with a lot of images?

Thanks!

Answer 1

I think you're on to the right track, but there's a few minor issues.

The user can choose to have either small circles (left) or thumbnails (right) as navigation and indicators of the current image.

What benefit does the first option have over the second? In both cases, the circles / thumbnails act as an index in the collection of images. Thumbnails allow users to preview the other images, while circles do not. Giving users unnecessary choices that don't affect functionality isn't ideal.

This is fine for small lists of images (4 or less), but I'm struggling with the navigation when there are a lot of images.

I think paginated thumbnails are the solution to this problem. I believe this is what you mean by having 'pages' of circles, but in your example I noticed you have a numerical index for the circles / thumbnails. I would advise against this; your circles / thumbnails are already an index for the images, you do not need an index for your index.

In fact, the pagination does not need to separate thumbnails into pages, you could have it move a single thumbnail at a time or even abandon discrete movement for continuous motion.

EDIT: I'd like to add that I'm kind of incorrect about showing a counter for thumbnails. By paginating the thumbnails, the user can't tell how many there are in total, so showing a numerical indicator is not a bad idea. I wouldn't put it below the thumbnails though. Maybe in one of the top corners of the focused image.