Makes Slot Machine effect in your html!
JavaScript CSS HTML
Latest commit 76e03e8 Mar 3, 2016 @josex2r Bower ignores
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 Travis tests May 15, 2014
Gruntfile.js Fixed banner Mar 3, 2016
LICENSE Removed license files May 16, 2014 Update 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

jQuery-SlotMachine Build Status Dependency Status devDependency Status

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

Check the example page!


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>


Creating the machine:

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

Get machine instance:

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


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

Change the selected element:

machine.prev(); //Previous element; //Next element

Stop the machine:


Get selected element:; //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:



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


Set the first element

active: 0


Set spin animation time

delay: 200


Pass an int as miliseconds to make the machine auto rotate

auto: false


The number of spins when auto is enabled

spins: false


Stop animation if the element is above or below the screen

stopHidden: true


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):

    randomize : function(activeElementIndex){
        return 0;


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

direction: 'up'


Jose Luis Represa


jQuery-SlotMachine is released under the MIT License.