Slot Machine-like Random List Picker - jQuery Bandit
File Size: | 5.3 KB |
---|---|
Views Total: | 324 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Bandit is a tiny jQuery-powered random list picker that allows you to create a slot machine-like experience on your website.
It works by spinning one or more HTML unordered lists and then selecting items from the list in a random fashion.
See Also:
- Slot-Machine Style Number & Option Picker In jQuery - Drum.js
- Create Slot Machine Animations With The Slotmachine.js Library
How to use it:
1. Download and load the Bandit plugin in the document.
<!-- jQuery is required --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- jQuery Bandit --> <script src="jquery.bandit.js"></script>
2. Call the function bandit
on your HTML lists (three lists in this example) and start/stop the spinning automatically.
$('ul').bandit({ speed: [20, 40, 60], autoStop: [2000, 3000, 4000], spinOnLoad: true, });
3. Create custom controls to start/stop the spinning manually.
<button id="start">Spin!</button> <button id="stop">Stop</button>
$('ul').bandit({ startButton: '#start', stopButton: '#stop', });
4. Get the randomly selected list items using the done
callback.
$('ul').bandit({ done: function(text){ console.log(text); } });
5. Config the spinning animation.
$('ul').bandit({ // delay delay: 2000, // acceleration accel: 10, // deceleration decel: .8, });
This awesome jQuery plugin is developed by JudeOsborn. For more Advanced Usages, please check the demo page or visit the official website.