@macrominds/gallery v0.5.0
= @macrominds/gallery
A modern image gallery that works without javascript.
It uses hidden input type="radio" and css translations to slide.
== Installation
source,bash
$ npm install @macrominds/gallery --save-dev
.In your scss
source,scss
@import "~@macrominds/gallery"
Alternatively, you can use the compiled version from https://unpkg.com/@macrominds/gallery@latest/dist/index.css
.CSS
source,html
== Usage
Make sure to keep the following html structure. You may want to use a server side script to generate the html.
.Using img
source,html
.Using figure
source,html
=== Touch support
Add class touch-enabled to a parent element if you want touch support. Arrows will go away in that case:
source,html
The touch enabled mode uses native scrolling and snaps to scroll positions using css.
Per default, the scrollbar stays visible in touch mode to avoid accessibility issues. But you can hide the scrollbar if you wish:
source,html
== Contribute
To build this package on your own, run
source,bash
$ npm run build
This will compile link:src/index.scss[] to link:dist/index.css[] and copy all files from link:src[] to link:dist[].
== TODO
- Build css and commit the artifact to git so that users don't need a scss processor
- Provide Android 4.4 compatible fallback (maybe)
- Provide touch friendly version
- Recheck and document browser compatibility