Git Product home page Git Product logo

slides's Introduction

Slides

This is meant to be used as a foundation for building slideshows in JavaScript.

Install

TODO

npm ???

Usage

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.

API

new Slides(elements[, options])

  • elements Array
  • options Object
    • loop Boolean Run the slides in loop mode or not. Default false.

The slides instance is an EventEmitter (node.js API).

Events

  • move (steps) Triggered once for every slideshow move.
  • update (el, previousState) Triggered on every move, for every element whose state has changed.

Methods

Feel free to add methods to Slides.prototype to extend its funcionality.

update()

Call this after setting up event listeners. This basically updates (mutates) the elements’ state property.

Returns the instance.

move([steps])

  • steps Integer How many steps the slides show move.

Returns a Boolean. true if it moved, false if not.

moveTo(index)

  • index Integer

Returns a Boolean. true if it moved, false if not.

Properties

  • size Integer
  • current Element
  • next Element
  • previous Element
  • first Element
  • last Element

State constants attached to constructor Slides

  • BEFORE
  • PREVIOUS
  • CURRENT
  • NEXT
  • AFTER

License

MIT

slides's People

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.