Makes Slot Machine effect in your html!
JavaScript CSS HTML
Latest commit 76e03e8 Mar 3, 2016 @josex2r Bower ignores
Permalink
Failed to load latest commit information.
css More examples Mar 1, 2016
dist Fixed banner Mar 3, 2016
img Triky Mar 1, 2016
libs Travis tests May 15, 2014
src Fixed banner Mar 3, 2016
test Going to es6! Dec 22, 2015
.eslintrc Going to es6! Dec 22, 2015
.gitignore Ignored tmp/ Feb 16, 2016
.travis.yml Travis tests May 15, 2014
CONTRIBUTING.md Travis tests May 15, 2014
Gruntfile.js Fixed banner Mar 3, 2016
LICENSE Removed license files May 16, 2014
README.md Update README.md Feb 2, 2016
bower.json Bower ignores Mar 3, 2016
index.html More examples Mar 1, 2016
package.json v3.0.1 Feb 29, 2016
slotmachine.jquery.json v3.0.1 Feb 29, 2016

README.md

jQuery-SlotMachine Build Status Dependency Status devDependency Status

A simple, lightweight jQuery plugin to make slot machine animation effect.

Check the example page!

Installation

Install the component using Bower:

$ bower install jquery-slotmachine --save

Include the script located in dist folder after the jQuery library:

<script src="/path/to/jquery.slotmachine.min.js"></script>

Usage

Creating the machine:

var machine = $(foo).slotMachine( params );

Get machine instance:

var machine = $(foo).slotMachine();

Shuffle:

machine.shuffle( repeat, onStopCallback ); //No args to make rotate infinitely, `repeat` is optional

Change the selected element:

machine.prev(); //Previous element

machine.next(); //Next element

Stop the machine:

machine.stop();

Get selected element:

machine.active; //Current element index

Get the selected element if shuffling:

machine.futureActive; //Future active element index

Check if the machine is running:

machine.running; //Returns boolean

Check if the machine is stopping:

machine.stopping; //Returns boolean

Check if the machine is visible:

machine.visible; //Returns boolean

Change spin result, if the returned value is out of bounds, the element will be randomly choosen:

machine.setRandomize(foo); //foo must be a function (should return int) or an int

Change spin direction, machine must not be running:

machine.direction = direction; //direction must be a String ('up' || 'down')

Destroy the machine. It will be useful when you want to reuse DOM:

machine.destroy();

Params

Params must be an object, optionally containing the next parammeters:

active

Set the first element

active: 0

delay

Set spin animation time

delay: 200

auto

Pass an int as miliseconds to make the machine auto rotate

auto: false

spins

The number of spins when auto is enabled

spins: false

stopHidden

Stop animation if the element is above or below the screen

stopHidden: true

randomize

Pass a function to select your own random element. This function must return an integer between 0 (first element) and max number of elements.

randomize: function(activeElementIndex){} //activeElementIndex = current selected index

Example (this machine always shows first element):

$('#foo').slotMachine({
    randomize : function(activeElementIndex){
        return 0;
    }
});

direction

Animation direction ('up' || 'down')

direction: 'up'

Authors

Jose Luis Represa

License

jQuery-SlotMachine is released under the MIT License.