jQuery-SlotMachine

:mega: 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!

slot-machine

Installation

Install the component using npm:

npm install jquery-slotmachine --save

yarn add jquery-slotmachine

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

const el = document.querySelector('#machine');

const machine = new SlotMachine(el, {
  active: 1,
  delay: 450
});

machine.shuffle();

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

Include the script located in dist folder:

<script src="https://github.com/josex2r/jQuery-SlotMachine/raw/master/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:

const element = document.getElementById('my-machine');
const machine = new SlotMachine(element, {
  /* options */
});

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

const machine = new SlotMachine(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`)

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

Arguments:

// Do a single spin
machine.shuffle();
// Do 5 spins before stop
machine.shuffle(5);
// "Infinite" spins
machine.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 machine
machine.shuffle(Infinity);
// Do 4 spins an then stop
machine.stop(4);

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

// Spin to the previous element
machine.prev();

// Spin to the next element
machine.next();

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

(async function run() {
  await machine.shuffle(5)
  await timeout(1000);
  run();
})();

jQuery-SlotMachine is released under the MIT License.