Jquery Slot Machine Api

| 24-05-2021
[RAND-1-100] Comments

OnEnd - Every number of slot number end function. (The given number is depending on number stop sequence) onFinish - All number of slot number end funtion. (The given number is. I am trying to create a slot machine using the following jquery plugin: jquery slot machine. I started with the simple Demo und entered my own list. The Problem I am having is that I need more than just that block which shows 1 line of the list. I need to show what is above and beneath the middle line of the lists. So I made the jSlotsWrapper. A simple, lightweight jQuery plugin to make slot machine animation effect. Check the example page! Include the script after the jQuery library.

jSlots is 2k of jQuery slot machine magic. It turns any list (<ol> or <ul>) into a slot machine!

Options

These are the options, with their default values, and what they do

Usage

Attach jQuery (successfully tested down to v1.4.1)

Attach jSlots plugin

Attach easing plugin (optional but HIGHLY recommended for nice animation)

Software

Create a list and an element that will spin the slots

Target the list and make it a jSlot!

Styling is up to you, but jSlots supplies a jSlots-wrapper div around your lists that should get overflow: hidden and a height set on it. Here are some recommended styles:

Published

DEMO

Dependencies

  • jQuery
  • jQuery UI

Installing

Include jQuery and jQuery UI to your page:

Include slot machine js/css:

Getting Started

html:

js:

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.

Api

Constructor Options

Machine

  • numSlotsToShow (3): The number of slots to show at once.

  • spinSpeed (200): How fast to spin the reels.

  • easeOutSpeed (1000): The speed for stopping at a particular slot.

  • minRounds (7): Minimum number of rounds before it should stop.

  • slotDifferenceFactor (5): How soon/late the current reel should stop after the previous.

  • hasShaders (true): Whether or not to show the top/bottom shaders to hide all but the current row.

  • leverThreshold (0.7): How far the lever must be pulled to start the slot machine. Range from 0.0 - 1.0 (percentage).

Methods

  • $mySlot.slotMachine('spin'): Triggers the spin

  • $mySlot.slotMachine('destroy'): Destroys the widget

Events

Jquery Slot Machine Api Tutorial

  • slotmachine:spin: triggers before the slot machine starts to spin

  • slotmachine:lose: triggers when you lose. First argument is the event and second is the results array of slot indexes.

  • slotmachine:win: triggers when you win. First argument is the event and second is the slot item index.