📣 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!

Install the component using npm:

npm install jquery-slotmachine --save

Install the component using Bower:

bower install jquery-slotmachine --save

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

<script>
const el = document.querySelector('#machine');
const machine = new SlotMachine(el, {
  active: 1,
  delay: 450,
  auto: 1500
});
</script>

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

Include the script located in dist folder:

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

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

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

If you preffer jQuery style then import the wrapper after the jQuery library:

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

$(document).ready(function(){
  $('#my-machine').slotMachine({ /* options */ });
});

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

const machine = new SlotMachine(element, {
  active: 2,
  auto: true
});

• 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.random: Get rando index between the machine bounds.
• machine.running: Check if the machine is running.
• machine.stopping: Check if the machine is stopping.
• machine.visible: Check if the machine is visible.
• machine.visibleTile: Get the current visible element in the machine viewport.
• machine.active: Alias to the active setting.
• machine.randomize: Alias to the randomize setting.
• machine.direction: Alias to the direction setting.
• machine.transition: Alias to the transition setting.

machine.shuffle(spins, callback): Starts spining the machine.

• spins (Number): Optionally set the number of spins.
• callback(Function): Callback triggered when the machine stops.

// Do a single spin
machine.shuffle();
// Do a single spin and then shows an alert
machine.shuffle(() => alert('Stop!'));
// Do 5 spins before stop
machine.shuffle(5);
// Do 7 spins and then showing an alert
machine.shuffle(7, () => alert('Stop!'));
// "Infinite" spins
machine.shuffle(9999999); // O_O

machine.stop(callback): Manually stops the machine.

• callback(Function): Callback triggered when the machine stops.

For example, start spinning the machine and stop it after pressing a button:

machine.shuffle(99999);
// Add the button listener
myButton.addEventListener('click', () => {
  // Stop spinning
  machine.stop();
});

machine.next()/machine.prev(): Spin to the next/previous element.

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

machine.run(): Starts the preview mode, it will spin/stop given a delay (more info in options).

machine.run();

machine.run(): Destroys the machine. It will be useful when you want to reuse DOM.

machine.destroy();

Jose Luis Represa

jQuery-SlotMachine is released under the MIT License.