Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
general purpose HTML slider
JavaScript
branch: master

bug fixe

latest commit ce4eb8b832
computer authored
Failed to load latest commit information.
public prepub
README.md bug fixe
appendCSS.js init
bundle.js prepub
castCall.js bug fixe
entry.js bug fixe
index.js bug fixe
package.json 1.2.0
prefix.js prepub
setStage.js bug fixe

README.md

uxer-show

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

npm install uxer-show

usage

This browserify-like module makes a slideshow out of a parent element's children. It works vertically and horizontally.

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. 'left' is for horzintal transitions, 'top' for vertical.

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)
Something went wrong with that request. Please try again.