TL;DR: I made a codepen and a static hosted demo
- codepen: https://codepen.io/paulsenon/pen/wvzbXLN
- static hosted: https://paulsenon.github.io/poc-js-free-image-gallery-carousel/
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:
- https://codepen.io/maoberlehner/embed/rNOyPNY (for the scroll-snap carousel)
- https://kleinfreund.de/css-only-dark-mode/ (for the full-screen toggle using css hack for inputs and labels)
Thanks for reading and have a nice day :)
