jQuery-SlotMachine

📣 jQuery is not neccessary now! The name it's just legacy.

A simple, and lightweight piece of code to make slot machine animation effect. It also exports a js wrapper to allow the usage with jQuery.

To preview what you can do check the example page!

Installation

Install the component using npm:

npm install jquery-slotmachine --save
yarn add jquery-slotmachine

Example

<divid="machine"><div>Madrid</div><div>London</div><div>New York</div></div>

constel=document.querySelector('#machine');constmachine=newSlotMachine(el,{active: 1,delay: 450});machine.shuffle();

Lookup the sourcecode in the examples page to see more examples.

Usage

Include the script located in dist folder:

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

Or build your own package using a bundled (webpack, rollup, ...)

Then you can make it work calling the lib in your app:

constelement=document.getElementById('my-machine');constmachine=newSlotMachine(element,{/* options */});

Settings

Use the first argument of the function to pass an object with the options:

constmachine=newSlotMachine(element,{active: 2,auto: true});

Name	Type	Default	Description
active	Number	0	The initial visible element (0 means the first one)
delay	Number	200	Duration (in ms) of each spin
randomize	Function	() => number	Function (returns number) that returns the next active element (random value as default)
direction	String	up	The spin direction (possible values are up and down)

Properties

• machine.nextActive: Get the next active element (only while shuffling).
• machine.nextIndex: Next element index according to the current direction.
• machine.prevIndex: Prev element index according to the current direction.
• machine.running: Check if the machine is running.
• machine.stopping: Check if the machine is stopping.
• machine.active: The current active element.

Methods

machine.shuffle(spins: number): Promise<void>: Starts spining the machine.

Arguments:

• spins (Number): Optionally set the number of spins until stop.

// Do a single spinmachine.shuffle();// Do 5 spins before stopmachine.shuffle(5);// "Infinite" spinsmachine.shuffle(Infinity);

machine.stop(spins: number): Promise<void>: Manually stops the machine.

Arguments:

• spins (Number): Set the number of spins until stop. Use 0 to inmediate stop.

// Start spinning the machinemachine.shuffle(Infinity);// Do 4 spins an then stopmachine.stop(4);

machine.next(): Promise<void>/machine.prev(): Promise<void>: Spins to the next/previous element.

// Spin to the previous elementmachine.prev();// Spin to the next elementmachine.next();

Usefull recipes

To create an inifite carousel effect (as the previous versions run method) use a recursive function:

(asyncfunctionrun(){awaitmachine.shuffle(5)awaittimeout(1000);run();})();

Authors

Jose Luis Represa

License

jQuery-SlotMachine is released under the MIT License.