/jQuery-SlotMachine

Makes Slot Machine effect without jquery (the name is just legacy O_O)

Primary LanguageJavaScriptMIT LicenseMIT

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!

slot-machine

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.