slides-js
`slides.js` is a small, modular library which helps you to create slideshow/carousel-like implementations.
Last updated 5 years ago by chielkunkels .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install slides-js 
SYNC missed versions from official npm registry.

slides.js

slides.js is a small, modular library which helps you to create slideshow/carousel-like implementations.

Note: this is a pre-1.0 release and as such the API should be considered unstable at this point.

Installation

Currently, slides.js is only available from npm. You can use a tool such as browserify in your build process to make it available in the browser.

$ npm install --save slides-js

Usage

The simplest instantiation of slides.js would look a little like this:

var Slides = require('slides-js'),
    slides = new Slides(document.querySelector('.slides'));

This will look for elements with the .slide selector inside the passed element and apply transitions to them. From then, you can call .next() and a few other methods on the slides instance - these will be detailed below.

Options

The constructor takes an options object as its second argument. Below is a description of each option, along with the defaults.

  • selector - selector to use to find slides, defaults to .slide
  • initial - slide to show initially, defaults to 0
  • shown - amount of slides to display simultaneously, defaults to 1
  • selected - which slide, out of the ones displayed, to mark as active, defaults to 0
  • loop - whether the slideshow automatically loops, defaults to false
  • interval - time (in ms) to wait between each slide transition
  • transition - which transition to use, defaults to css3. Custom transitions can be used too (detailed below)
  • transitionOptions - options passed directly to the transition instance, defaults depend on the transition

Instance methods

Once your slides.js instance has been created, a few methods can be called:

  • next - transition to the next slide, this will automatically loop around back to the beginning once the end is reached
  • previous - transition to previous slide, this will automatically loop around back to the end once the beginning is reached
  • to - transition to slide by index, if no slide exists on the given index nothing happens

Custom transitions

It is possible to create custom transitions, you can do this by passing a transition function to the transition option. For example:

var Slide = function(params){
  this.element = params.element;

  // since the options get passed through directly
  // from the main instance you can use whatever
  // options suit your transition
  this.options = params.options;
};

Slide.prototype.hide = function(instant, direction){
  this.element.style.display = 'none';
};

Slide.prototype.show = function(instant, direction){
  this.elment.style.display = 'block';
};

var Slides = require('slides-js');
new Slides(document.querySelector('.slides'), {
  transition: Slide
});

The above illustrates the simplest transition possible, simply showing and hiding without a transition. As you can see, a transition instance should have 3 methods that can be called:

  • constructor - the transition objects are always called with new
    • params - parameters object, contains the following keys:
      • element - the slide element, this is regular DOM element
      • parent - the wrapper element, this is a regular DOM element
      • shown - amount of slides being displayed simultaneously
      • options - the options for the transition, passed directly from the Slides options object
  • hide - hide the slide
    • instant - whether or not the transition should be instant, this is useful for initial pageload when the slides get loaded for the very first time. Usually you don't want to show a transition right on pageload.
    • direction - this is either + or - and can help you determine which direction your transition needs to go
  • show - show the slide
    • instant - whether or not the transition should be instant, this is useful for initial pageload when the slides get loaded for the very first time. Usually you don't want to show a transition right on pageload.
    • direction - this is either + or - and can help you determine which direction your transition needs to go
    • position - this indicates which position the slide should take, in the case of displaying multiple slides at once
    • isActive - whether this is the actual active slide

Current Tags

  • 0.3.0                                ...           latest (5 years ago)

8 Versions

  • 0.3.0                                ...           5 years ago
  • 0.2.3                                ...           5 years ago
  • 0.2.2                                ...           5 years ago
  • 0.2.0                                ...           5 years ago
  • 0.1.3                                ...           5 years ago
  • 0.1.2                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 8
Dependencies (2)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |