Skip to content

alejanderl/jQuery-SlotMachine

 
 

Repository files navigation

#jQuery-SlotMachine Build Status Dependency Status devDependency Status

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

[Check the example page!] (http://josex2r.github.io/jQuery-SlotMachine/)

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

Change the selected element:

machine.prev(); //Previous element

machine.next(); //Next element

Get selected element:

machine.active; //Current element index

Get the next selected element:

machine.futureActive; //Future active element index

Check if the machine is running:

machine.isRunning; //Returns boolean

Check if the machine is stopping:

machine.isStopping; //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.setDirection(direction); //direction must be a String ('up' || 'down')

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.

About

Makes Slot Machine effect in your html!

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 82.5%
  • HTML 9.4%
  • CSS 8.1%