A simple, lightweight jQuery plugin to make slot machine animation effect.
[Check the example page!] (http://josex2r.github.io/jQuery-SlotMachine/)
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();
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 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
stopHidden
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):
$('#foo').slotMachine({
randomize : function(activeElementIndex){
return 0;
}
});
Animation direction ('up' || 'down')
direction: 'up'
##License
jQuery-SlotMachine is released under the MIT License.