Image gallery carousel without Javascript PoC (css only)

TL;DR: I made a codepen and a static hosted demo

I was struggling finding the perfect image carousel for my website that could be convenient to use on all platform (desktop/laptop/tablet/phone) with different input types (mouse+keyboard/touchpad/touchscreen) and with pan/zoom/fullscreen features and I found that the perfect lib does not exist. (or it is well hidden, so please tell me if you know it).

I wanted to make one myself but I definitely don’t have enough time yet and it is something really heavy to make if you want a native feeling on every devices. But while I was doing some researches I found a way to make simple carousel using css scroll snap. And I tried to make it look like legit carousel in a small PoC. Obviously it is not the perfect solution I was looking for, but it is definitely interesting. It is dead simple and really powerful on low end devices. And it requires absolutely no js !!

I’m considering using it as a fallback on <noscript>, but I’m sure it is something that can be useful if you need simpler carousel and not a whole image viewer.

So yes I thought it might be useful for some people so I posted this little PoC here.

I’ve got inspired by:

Thanks for reading and have a nice day :)

I do stuff with computer and code and internet and I like it.