Skip to content


Switch branches/tags


Failed to load latest commit information.
Latest commit message
Commit time
Jul 22, 2018
Apr 17, 2018
Mar 18, 2018
Mar 18, 2018
Mar 18, 2018
Mar 18, 2018
Jul 22, 2018
Dec 29, 2020
Dec 29, 2020

jQuery-SlotMachine Build Status Dependency Status devDependency Status

📣 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>New York</div>

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

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>
  $('#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
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


  • 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.
  • 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
// Do a single spin and then shows an alert
machine.shuffle(() => alert('Stop!'));
// Do 5 spins before stop
// 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:

// Add the button listener
myButton.addEventListener('click', () => {
  // Stop spinning
}); Spin to the next/previous element.

// Spin to the previous element
// Spin to the next element; Starts the preview mode, it will spin/stop given a delay (more info in options).; Destroys the machine. It will be useful when you want to reuse DOM.



Jose Luis Represa


jQuery-SlotMachine is released under the MIT License.