Example 1 - Simple
A very simple slot machine that show random numbers each time played.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
View Code
$('#btn-example1').click(function() {
  $('#example1 ul').playSpin();
});
Example 2 - Specify numbers
Specify end number before the slot machine spin. Insert number 1-7 in text box. (Error handling: show the first one if out of range)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
View Code
$('#btn-example2').click(function() {
  $('#example2 ul').playSpin({
    endNum: [7, 7, 7],
  });
});
Example 3 - Stop sequence
Specify stop sequence from left to right or right to left or totally random (like example 1)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
View Code
$('#btn-example3').click(function() {
  $('#example3 ul').playSpin({
    stopSeq: 'leftToRight', // rightToLeft
  });
});
Example 4 - Easing
Easing effect, default: swing (Import jquery-easing and select easing effect here: link)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
View Code
$('#btn-example4').click(function() {
  $('#example4 ul').playSpin({
    easing: 'easeOutBack',
  });
});
Example 5 - Spin Time
Change spin time to wait longer or wait shorter. (Value is set in milliseconds, 1 second = 1,000 milliseconds)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
View Code
$('#btn-example5').click(function() {
  $('#example5 ul').playSpin({
    time: 1000,
  });
});
Example 6 - Images
Not only limited to numbers !! It can be images as well.
View Code
$('#btn-example6').click(function() {
  $('#example6 ul').playSpin({});
});
Example 7 - onEnd and onFinish
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 by sequence from left to right)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
onEnd: onFinish: View Code
$('#btn-example7').click(function() {
  $('#lbl-example7-1').text('');
  $('#lbl-example7-2').text('');
  $('#example7 ul').playSpin({
    onEnd: function(num) {
      $('#lbl-example7-1').text($('#lbl-example7-1').text() + num.toString());
    },
    onFinish: function(num) {
      $('#lbl-example7-2').text(num);
    }
  });
});
Example 8 - Sounds
Sounds control is not implemented and left fully for programmer to program.
Following is example on how to intergrate with sounds and music. (Open speaker!)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
View Code
$('#btn-example8').click(function() {
  sound.play(); // Start play the sound after click button
  $('#example8 ul').playSpin({
    time: 2000,
    endNum: [1, 2, 7],
    stopSeq: 'rightToLeft',
    onEnd: function() {
      ding.play(); // Play ding after each number is stopped
    },
    onFinish: function() {
      sound.pause(); // To stop the looping sound is pause it
    }
    });
});
Example 9 - Spin and Stop
However, in some situations, user would like to stop the spinning manually
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
View Code
$('#btn-example9-start').click(function() {
  $('#example9 ul').playSpin({
    manualStop: true
  });
});

$('#btn-example9-stop').click(function() {
  $('#example9 ul').stopSpin();
});
Example 10 - Marks
To stop each spin individually, it is required to generate startSpin on each spin individually.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 0
  • .
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 0
  • %
View Code
var numKeeptrack = 0;
$('#btn-example10-start').click(function() {
  numKeeptrack = 3;
  $('#example10 #first').playSpin({
    manualStop: true
  });
  $('#example10 #second').playSpin({
    manualStop: true
  });
  $('#example10 #third').playSpin({
    manualStop: true
  });
});

$('#btn-example10-stop').click(function() {
  if (numKeeptrack == 3) {
    $('#example10 #third').stopSpin();
  } else if (numKeeptrack == 2) {
    $('#example10 #second').stopSpin();
  } else if (numKeeptrack == 1) {
    $('#example10 #first').stopSpin();
  }
  numKeeptrack--;
});
Example 11 - Stop time
Set stop time for a spin (Suitable for long list)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
Spin time:
Stop time:
View Code
$('#btn-example11-start').click(function() {
  $('#example11 ul').playSpin({
    time: $('#txt-example11-time').val(),
    useStopTime: true,
    stopTime: $('#txt-example11-stoptime').val(),
  });
});
Extra Example - Ajax
Here is an extra coding example, for instance, ajax to server, generate random numbers and save into database, return the numbers.
(Required basic javascript and server side language, eg: PHP) View Code
$('#btn-click').click(function() {
  $.ajax({
    url: // url
    data: // pass data or leave it
  })
  .done(function(numbers) {
    $('#slotmachine').playSpin({
      endNum: numbers,
    });
  });
});
Buy Me a Coffee