Js free responsive image gallery

It uses css scroll snap (kind of widly supported) to make a really powerful crousel. If you ever tried to find the perfect carousel:

  • can be used with mouse/touchscreen/trackpads
  • can run smoothly on low en devices (because it uses only browser native behaviours)
  • can have the basic features : swipe, fullscreen, zoom&pan
You must have found that it is not something simple. It exists tones of library that just covers some of the usecases and they are often heavy js.

I made this js free, for the beauty of it, but it can be event better if you use just a bit of javascript to improve some features such as the navigation buttons and detect the current slide.

It is not the perfect solution though... It has some caveates:

  • It uses url anchor to slide to one slide with controls (so it affect browser history, you might not want that) but it can be fixed my using javascript to navigation.
  • The full screen does not push any route to broser history, so UX is bad, especially on mobile, cause users will want to press return to disbale it. It ban also be fixed with a bit of javascript.
  • The zoom and pan does not act on the image only but also on the controls. I thought of embeded it in iframe so it fix that, but unfortunately, iframe doesn't scroll-snap well until it received a click action. Too bad...