Drum.js is a jQuery plugin for creating an iOS-style picker view where the users are able to select numeric values and/or select options by rotating the wheels just like a slot machine.
Fully responsive, accessible and mobile-friendly.
Then, simply style the slot-box any way you want (change the color, use an image.etc). You can have as many slot-reel as you want and each reel can have as many slot-box as you'd like. However, each slot-reel must have the same number of slots. Constructor Options. NumSlotsToShow (3): The number of slots to show at once. SpinSpeed (200): How fast to spin the reels. Selecting a Venue Slot Machine Style I made an app that will pick a venue from a set at random when the user clicks a button. I wanted the random selection to look like a slot machine game. To do this, I decided to try CSS3 and JQuery for the animations. Initially I was using –webkit-keyframes and changing the background positions.
How to use it:
1. Include the latest version of jQuery library and the minified version of the Drum.js plugin on the web page.
2. Create an empty container for the picker view.
3. Initialize the plugin to generate a basic picker view.
4. Apply your own CSS styles to the picker view.
5. The plugin also supports the native select box.
6. Customize the picker view by overring the default settings as displayed below.
7. Event handlers.
Changelog:
v0.1.2 (2020-04-15)
- Focus drum on click (touch)
v0.1.1 (2019-08-12)
- Fix dragend event name
This awesome jQuery plugin is developed by tigrr. For more Advanced Usages, please check the demo page or visit the official website.
Jquery Slot Machine Api Software
- Prev: Protect Phone Number On Your Website - jQuery hide-phone-num
- Next: Display Wiki Definitions For Terms - jQuery wikilookup