This is meant to be used as a foundation for building slideshows in JavaScript.
TODO
npm ???
var Slides = require('???')
// `elements` should be an array of objects (DOM nodes, for instance)
var slides = new Slides(elements)
// `move` triggers every time the slides change position
slides.on('move', function (steps) {
// `steps` is usually 1 or -1 (backwards)
// Here you could update a counter
counterEL.textContent = `${slides.current.index + 1}`/`${slides.size}`
})
// `update` triggers on every move, for every element that changes state
// `state` is a string and there’s 5 types:
// current, next, previous, before and after
slides.on('update', function (el, previousState) {
// Here you could show the current element, and hide all others
// (for the most basic kind of slideshow)
el.classList.add(el.state)
el.classList.remove(previousState)
})
slides.update() // bootstrap state, call once
slides.move() // one step forward
slides.move(-1) // a step backwards
slides.moveTo(slides.first.index) // back to the first slide
This library doesn't do anything to elements
other than:
- add an
index
property - add a
state
property and update it accordingly
It's up to you to handle your DOM nodes in any way you like to make the slideshow, well, do something.
elements
Arrayoptions
Objectloop
Boolean Run the slides in loop mode or not. Defaultfalse
.
The slides
instance is an EventEmitter (node.js API).
move
(steps) Triggered once for every slideshow move.update
(el, previousState) Triggered on every move, for every element whose state has changed.
Feel free to add methods to Slides.prototype
to extend its funcionality.
Call this after setting up event listeners. This basically updates (mutates) the elements’ state
property.
Returns the instance.
steps
Integer How many steps the slides show move.
Returns a Boolean. true
if it moved, false
if not.
index
Integer
Returns a Boolean. true
if it moved, false
if not.
- size Integer
- current Element
- next Element
- previous Element
- first Element
- last Element
BEFORE
PREVIOUS
CURRENT
NEXT
AFTER
MIT