Web Interface  |  Patterns

Slideshow

This section is about how to work with slideshow and its navigation.

01Users don't scroll through slideshow

Users do not scroll through images in slideshow. If something is hidden, it's not there. Of course, users don't have time to wait for an animated slideshow to change frames. So in real life, slideshows are simply ignored, especially if it's a Hero or Header element. The user simply scrolls down the page looking for what they want, especially on mobile.

So the best solution is to expand the slideshow into image and caption blocks. This way users will always see what's hidden inside.

Users don't scroll through slideshow, bad pattern.
Expanded blocks instead of slideshow, good pattern.

02Slideshow navigation

There are cases where a slideshow makes sense, for example, it is an acceptable pattern when displaying images on a product page.

In this case, it is better to show slide thumbnails to navigate through the slideshow. This is a convenient and obvious interface. Dots navigation should always be avoided. Although this is a frequently used pattern, most users don't see dots as navigation.

Bad navigation through the slides.
The slide thumbnails are good navigation.