= @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