Showcase — fast, accessible, minimal image slider & grid

Alex Florisca
2 min readDec 11, 2020

The idea is simple: display a bunch of images in the best way on all devices.

What is the “best way”? Surely it’s different for everyone?

Well not really. If you take 10 of the most successful e-commerce stores online, you’ll find they show their products in very similar ways. Probably based on lots of expensive user testing and UX work. So why not take advantage of that?

You don’t just want an image slider. You want to show a potential customer how awesome your product/service/puppy is, with minimal clicks, swipes or backflips required from them.

This is the best way.

Image slider on small devices. Simple dot thumbnails give you visual feedback about how many images there are and how far along you are. You have a small amount of screen real estate here so it makes sense to hide some of the images so they can be shown in full glory.

Simple image slider on small devices

Upgrade those thumbnails to image previews on bigger devices, so users can get a better idea about your product/service/thing without clicking anything.

Image thumbnails on bigger screens. They can be positioned left, right or bottom

And show a grid of images on the biggest screens. Because why hide your images if you don’t have to? People are there to see what you have to offer. It’s much better to show and tell than to make people click. Always.

Grid of images for the largest screens

Cool, how do I use it?

Like this.

That’s it. Go play. Tell me what you think in the comments. Raise any issues here

If you found this useful, you can build up some good karma and buy me a coffee

--

--