Slot Machine-like Random List Picker - jQuery Bandit

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.