Makes Slot Machine effect without jquery (the name is just legacy O_O)
JavaScript HTML CSS
Clone or download
Latest commit d8c38fa Jul 22, 2018
Permalink
Failed to load latest commit information.
dist build plugin Jul 22, 2018
img add example image Jul 22, 2018
lib remove static property Jul 22, 2018
styles examples Apr 17, 2018
tests no func doc + travis Apr 10, 2018
.eslintrc.js header Mar 18, 2018
.gitignore ignore tags Mar 18, 2018
.travis.yml lint Mar 18, 2018
CONTRIBUTING.md contributing Apr 23, 2018
LICENSE header Mar 18, 2018
README.md add example image Jul 22, 2018
bower.json v4.0.1 Jul 22, 2018
gulpfile.js add header to minified Apr 23, 2018
index.html fix active element Apr 17, 2018
package-lock.json 4.0.1 Jul 22, 2018
package.json 4.0.1 Jul 22, 2018
slotmachine.jquery.json v4.0.1 Jul 22, 2018
testem.json comment shuffle tests Mar 22, 2018

README.md

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.