uxer-show

HTML slider logic

Usage no npm install needed!

<script type="module">
  import uxerShow from 'https://cdn.skypack.dev/uxer-show';
</script>

README

uxer-show

Pure javascript slider logic. The show is about to begin...

usage

This browserify-like module makes a slideshow out of a parent element's children. The only style modifications it makes is to translate the slides. There are no css files (although you can see the demo css in /public). All styles, including transition timing, are for you to decide.

The constructor takes a three params: parent ID, direction ('top' || 'left'), and an starting index. It returns 3 functions: previous(), next(), and goTo(index).

The current element is given css class 'scene'.

See the example below.

demo

to run the demo

git clone git@github.com:NHQ/uxer-show.git
npm install -g watchify opa
cd uxer-show
opa

watchify is browserify w/ file watching opa is a speedy way to prototype front-end stuff

example

var show = require('uxer-show')
var prev = document.getElementById('prev')
var next = document.getElementById('next')

var slider = show('stage', 'left', 0)
next.addEventListener('click', slider.next)
prev.addEventListener('click', slider.prev)

setTimeout(function(){
    slider.goTo(4)
}, 1000)