📣 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 --saveInstall the component using Bower:
bower install jquery-slotmachine --save<divid="machine"><div>Madrid</div><div>London</div><div>New York</div></div><script>constel=document.querySelector('#machine');constmachine=newSlotMachine(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:
<scriptsrc="/path/to/slotmachine.min.js"></script>Then you can make it work calling the lib in your app:
constelement=document.getElementById('my-machine');constmachine=newSlotMachine(element,{/* options */});If you preffer jQuery style then import the wrapper after the jQuery library:
<scriptsrc="/path/to/jquery.min.js"></script><scriptsrc="/path/to/slotmachine.min.js"></script><scriptsrc="/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:
constmachine=newSlotMachine(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.machine.active: Alias to theactivesetting.machine.randomize: Alias to therandomizesetting.machine.direction: Alias to thedirectionsetting.machine.transition: Alias to thetransitionsetting.
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 spinmachine.shuffle();// Do a single spin and then shows an alertmachine.shuffle(()=>alert('Stop!'));// Do 5 spins before stopmachine.shuffle(5);// Do 7 spins and then showing an alertmachine.shuffle(7,()=>alert('Stop!'));// "Infinite" spinsmachine.shuffle(9999999);// O_Omachine.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 listenermyButton.addEventListener('click',()=>{// Stop spinningmachine.stop();});machine.next()/machine.prev(): Spin to the next/previous element.
// Spin to the previous elementmachine.prev();// Spin to the next elementmachine.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();jQuery-SlotMachine is released under the MIT License.