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

Install the component using Bower:

bower install jquery-slotmachine --save

Example

<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.

Usage

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 */ });
});

Settings

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
auto	Boolean	false	Runs the carousel mode when creating the machine
spins	Number	5	Number of spins after stop in carousel mode
randomize	Function	null	Function (returns number) that is going to be called to set the next active element
onComplete	Function	null	Callback after each spin in carousel mode
inViewport	Boolean	true	Only spin when the machine is inside the viewport
direction	String	up	The spin direction (possible values are up and down)
transition	String	ease-in-out	The CSS transition

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.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.

Methods

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();

Authors

Jose Luis Represa

License

jQuery-SlotMachine is released under the MIT License.