Easy Roller Demo's & Documentation

Horizontal Roller

Preview
HTML
Javascript
CSS
Full Code


<div class="roller"></div>
<p><button type="button" class="start-spin">Start</button></p>


jQuery(document).ready(function($){

  var items = [
    {
      name: 'Adnane',
    },{
      name: 'Zarrouk',
    },{
      name: 'Aberdeen',
    },{
      name: 'Aliz',
    },{
      name: 'Clea',
    },{
      name: 'Lucas',
    },{
      name: 'Ethan',
    },{
      name: 'Aiden',
    },{
      name: 'Federica',
    },{
      name: 'Emanuella',
    },{
      name: 'Oliver',
    },{
      name: 'Grayson',
    },{
      name: 'Kitty',
    },{
      name: 'Samuel',
    },{
      name: 'Trixie',
    },{
      name: 'Cicely',
    },{
      name: 'Nathan',
    }
  ];

  $(".roller").eroller({
    items  : items,
  });

  //Start Button
  $(document).on('click','.start-spin',function(){
    var winner = 'Snow';
    $(".roller").eroller('start','name',winner);
  });

});


.roller .er-item {
  width: 100px;
  font-size: 14px;
}


<div class="roller"></div>
<p><button type="button" class="start-spin">Start</button></p>

<style>
.roller .er-item {
  width: 100px;
  font-size: 14px;
}
</style>

<script>
jQuery(document).ready(function($){

  var items = [
    {
      name: 'Adnane',
    },{
      name: 'Zarrouk',
    },{
      name: 'Aberdeen',
    },{
      name: 'Aliz',
    },{
      name: 'Clea',
    },{
      name: 'Lucas',
    },{
      name: 'Ethan',
    },{
      name: 'Aiden',
    },{
      name: 'Federica',
    },{
      name: 'Emanuella',
    },{
      name: 'Oliver',
    },{
      name: 'Grayson',
    },{
      name: 'Kitty',
    },{
      name: 'Samuel',
    },{
      name: 'Trixie',
    },{
      name: 'Cicely',
    },{
      name: 'Nathan',
    }
  ];

  $(".roller").eroller({
    items : items,
  });

  //Start Button
  $(document).on('click','.start-spin',function(){
    var winner = 'Snow';
    $(".roller").eroller('start','value',winner);
  });
  
  //Events
  $(document).on('eroller.start','.roller',function(){
    $('.message').text('Rolling...');
    
  });
  
  $(document).on('eroller.complete','.roller',function(event,item){
    $('.message').text(item.message);
  });
  
});
</script>

Vertical Roller

Preview
HTML
Javascript
CSS
Full Code

Roll to win


<div class="roller"></div>
<p><button type="button" class="start-spin">Start</button></p>


jQuery(document).ready(function($){

  var items = [
    {
      text: '<i class="fa fa-cubes" aria-hidden="true"></i>',
      value: 'Cubes',
      message: 'You win a Cubes',
    },{
      text: '<i class="fa fa-gift" aria-hidden="true"></i>',
      value: 'Gift',
      message: 'You win a Gift',
    },{
      text: '<i class="fa fa-leaf" aria-hidden="true"></i>',
      value: 'Leaf',
      message: 'You win a Leaf',
    },{
      text: '<i class="fa fa-heartbeat" aria-hidden="true"></i>',
      value: 'Heartbeat',
      message: 'You win a Heartbeat',
    },{
      text: '<i class="fa fa-key" aria-hidden="true"></i>',
      value: 'Key',
      message: 'You win a Key',
    },{
      text: '<i class="fa fa-sun-o" aria-hidden="true"></i>',
      value: 'Sun',
      message: 'You win a Sun',
    },{
      text: '<i class="fa fa-taxi" aria-hidden="true"></i>',
      value: 'Taxi',
      message: 'You win a Taxi',
    },{
      text: '<i class="fa fa-futbol-o" aria-hidden="true"></i>',
      value: 'Ball',
      message: 'You win a Ball',
    },{
      text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>',
      value: 'Snow',
      message: 'You win a Snow',
    },{
      text: '<i class="fa fa-refresh fa-spin" aria-hidden="true"></i>',
      value: 'Spin',
      message: 'You win a Spin',
    },{
      text: '<i class="fa fa-book" aria-hidden="true"></i>',
      value: 'Book',
      message: 'You win a Book',
    },{
      text: '<i class="fa fa-battery-full" aria-hidden="true"></i>',
      value: 'Battery',
      message: 'You win a Battery',
    },{
      text: '<i class="fa fa-beer" aria-hidden="true"></i>',
      value: 'Beer',
      message: 'You win a Beer',
    },{
      text: '<i class="fa fa-gamepad" aria-hidden="true"></i>',
      value: 'Gamepad',
      message: 'You win a Gamepad',
    },{
      text: '<i class="fa fa-puzzle-piece" aria-hidden="true"></i>',
      value: 'Puzzle Piece',
      message: 'You win a Puzzle Piece',
    }
  ];

  $(".roller").eroller({
    items  : items,
  });

  //Start Button
  $(document).on('click','.start-spin',function(){
    var winner = 'Snow';
    $(".roller").eroller('start','value',winner);
  });
  
  //Events
  $(document).on('eroller.start','.roller',function(){
    $('.message').text('Rolling...');
    
  });
  
  $(document).on('eroller.complete','.roller',function(event,item){
    $('.message').text(item.message);
  });
  
});


.roller{
  height: 400px;
  font-size: 24px;
}


<div class="roller"></div>
<p><button type="button" class="start-spin">Start</button></p>

<style>
.roller{
  height: 400px;
  font-size: 24px;
}
</style>

<script>
jQuery(document).ready(function($){

  var items = [
    {
      text: '<i class="fa fa-cubes" aria-hidden="true"></i>',
      value: 'Cubes',
      message: 'You win a Cubes',
    },{
      text: '<i class="fa fa-gift" aria-hidden="true"></i>',
      value: 'Gift',
      message: 'You win a Gift',
    },{
      text: '<i class="fa fa-leaf" aria-hidden="true"></i>',
      value: 'Leaf',
      message: 'You win a Leaf',
    },{
      text: '<i class="fa fa-heartbeat" aria-hidden="true"></i>',
      value: 'Heartbeat',
      message: 'You win a Heartbeat',
    },{
      text: '<i class="fa fa-key" aria-hidden="true"></i>',
      value: 'Key',
      message: 'You win a Key',
    },{
      text: '<i class="fa fa-sun-o" aria-hidden="true"></i>',
      value: 'Sun',
      message: 'You win a Sun',
    },{
      text: '<i class="fa fa-taxi" aria-hidden="true"></i>',
      value: 'Taxi',
      message: 'You win a Taxi',
    },{
      text: '<i class="fa fa-futbol-o" aria-hidden="true"></i>',
      value: 'Ball',
      message: 'You win a Ball',
    },{
      text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>',
      value: 'Snow',
      message: 'You win a Snow',
    },{
      text: '<i class="fa fa-refresh fa-spin" aria-hidden="true"></i>',
      value: 'Spin',
      message: 'You win a Spin',
    },{
      text: '<i class="fa fa-book" aria-hidden="true"></i>',
      value: 'Book',
      message: 'You win a Book',
    },{
      text: '<i class="fa fa-battery-full" aria-hidden="true"></i>',
      value: 'Battery',
      message: 'You win a Battery',
    },{
      text: '<i class="fa fa-beer" aria-hidden="true"></i>',
      value: 'Beer',
      message: 'You win a Beer',
    },{
      text: '<i class="fa fa-gamepad" aria-hidden="true"></i>',
      value: 'Gamepad',
      message: 'You win a Gamepad',
    },{
      text: '<i class="fa fa-puzzle-piece" aria-hidden="true"></i>',
      value: 'Puzzle Piece',
      message: 'You win a Puzzle Piece',
    }
  ];

  $(".roller").eroller({
    items  : items,
	align  : 'vertical',
  });

  //Start Button
  $(document).on('click','.start-spin',function(){
    var winner = 'Snow';
    $(".roller").eroller('start','value',winner);
  });

});
</script>

Game Roller Example

Preview
HTML
Javascript
CSS
Full Code

Roll to win


<div class="game-roller">
  <div class="roller-1"></div>
  <div class="roller-2"></div>
  <div class="roller-3"></div>
  <p><b class="message">Roll to win</b></p>
  <div style="text-align: center">
    <button type="button" class="start-spin">Start</button>
  </div>
</div>


function getDuplicates(array) {
  var sorted_arr = array.slice().sort();
  var results = [];
  var c = 0;
  for (var i = 0; i < sorted_arr.length - 1; i++) { 
    if (sorted_arr[i + 1] == sorted_arr[i]) {
      results[c] = sorted_arr[i];
      c++;
    }
  }
  return results;
}

jQuery(document).ready(function($){
  var items = [
    {
      text: '<i class="fa fa-cubes" aria-hidden="true"></i>',
      value: 'Cubes',
      message: 'You win a Cubes',
    },{
      text: '<i class="fa fa-gift" aria-hidden="true"></i>',
      value: 'Gift',
      message: 'You win a Gift',
    },{
      text: '<i class="fa fa-leaf" aria-hidden="true"></i>',
      value: 'Leaf',
      message: 'You win a Leaf',
    },{
      text: '<i class="fa fa-heartbeat" aria-hidden="true"></i>',
      value: 'Heartbeat',
      message: 'You win a Heartbeat',
    },{
      text: '<i class="fa fa-key" aria-hidden="true"></i>',
      value: 'Key',
      message: 'You win a Key',
    },{
      text: '<i class="fa fa-sun-o" aria-hidden="true"></i>',
      value: 'Sun',
      message: 'You win a Sun',
    },{
      text: '<i class="fa fa-taxi" aria-hidden="true"></i>',
      value: 'Taxi',
      message: 'You win a Taxi',
    },{
      text: '<i class="fa fa-futbol-o" aria-hidden="true"></i>',
      value: 'Ball',
      message: 'You win a Ball',
    },{
      text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>',
      value: 'Snow',
      message: 'You win a Snow',
    },{
      text: '<i class="fa fa-refresh fa-spin" aria-hidden="true"></i>',
      value: 'Spin',
      message: 'You win a Spin',
    },{
      text: '<i class="fa fa-book" aria-hidden="true"></i>',
      value: 'Book',
      message: 'You win a Book',
    },{
      text: '<i class="fa fa-battery-full" aria-hidden="true"></i>',
      value: 'Battery',
      message: 'You win a Battery',
    },{
      text: '<i class="fa fa-beer" aria-hidden="true"></i>',
      value: 'Beer',
      message: 'You win a Beer',
    },{
      text: '<i class="fa fa-gamepad" aria-hidden="true"></i>',
      value: 'Gamepad',
      message: 'You win a Gamepad',
    },{
      text: '<i class="fa fa-puzzle-piece" aria-hidden="true"></i>',
      value: 'Puzzle Piece',
      message: 'You win a Puzzle Piece',
    }
  ];

  $('.roller-1 ,.roller-2 ,.roller-3').eroller({
    items  : items,
    key    : 'text',
    align   : 'vertical',
  });
  
  // Buttons
  $('.game-roller').on('click','.start-spin',function(){
    var randomWinner  = items[Math.floor(Math.random() * items.length)];
    $('.game-roller .roller-1').eroller('start','value',randomWinner.value,8000);
    randomWinner  = items[Math.floor(Math.random() * items.length)];
    $('.game-roller .roller-2').eroller('start','value',randomWinner.value,7500);
    randomWinner  = items[Math.floor(Math.random() * items.length)];
    $('.game-roller .roller-3').eroller('start','value',randomWinner.value,7000);
    
    $('.game-roller b.message').text('Rolling...');
    $(".game-roller .start-spin").prop("disabled", true);
  });
  
  //Events
  var winners = [],calc = 0;
  $('.game-roller').on('eroller.complete','.roller-1 ,.roller-2 ,.roller-3',function(event,item){
    
    winners[calc] = item.value;
    ++calc;
    if(calc === 3){
      var wins = getDuplicates(winners);
      
      if( wins.length === 0 )
        $('.game-roller b.message').html('You win Nothing' );
      else{
        $('.game-roller b.message').html('You win ' +(wins.length + 1)+ ' '+wins[0]+'\'s' );
      }
      $(".game-roller .start-spin").prop("disabled", false);
      calc = 0;
    }
  });
});


.game-roller .roller-1 ,
.game-roller .roller-2 ,
.game-roller .roller-3{
  height: 200px;
  font-size: 24px;
}


<div class="game-roller">
  <div class="roller-1"></div>
  <div class="roller-2"></div>
  <div class="roller-3"></div>
  <p><b class="message">Roll to win</b></p>
  <div style="text-align: center">
    <button type="button" class="start-spin">Start</button>
  </div>
</div>

<style>
.game-roller .roller-1 ,
.game-roller .roller-2 ,
.game-roller .roller-3{
  height: 200px;
  font-size: 24px;
}
</style>

<script>
function getDuplicates(array) {
  var sorted_arr = array.slice().sort();
  var results = [];
  var c = 0;
  for (var i = 0; i < sorted_arr.length - 1; i++) { 
    if (sorted_arr[i + 1] == sorted_arr[i]) {
      results[c] = sorted_arr[i];
      c++;
    }
  }
  return results;
}

jQuery(document).ready(function($){
  var items = [
    {
      text: '<i class="fa fa-cubes" aria-hidden="true"></i>',
      value: 'Cubes',
      message: 'You win a Cubes',
    },{
      text: '<i class="fa fa-gift" aria-hidden="true"></i>',
      value: 'Gift',
      message: 'You win a Gift',
    },{
      text: '<i class="fa fa-leaf" aria-hidden="true"></i>',
      value: 'Leaf',
      message: 'You win a Leaf',
    },{
      text: '<i class="fa fa-heartbeat" aria-hidden="true"></i>',
      value: 'Heartbeat',
      message: 'You win a Heartbeat',
    },{
      text: '<i class="fa fa-key" aria-hidden="true"></i>',
      value: 'Key',
      message: 'You win a Key',
    },{
      text: '<i class="fa fa-sun-o" aria-hidden="true"></i>',
      value: 'Sun',
      message: 'You win a Sun',
    },{
      text: '<i class="fa fa-taxi" aria-hidden="true"></i>',
      value: 'Taxi',
      message: 'You win a Taxi',
    },{
      text: '<i class="fa fa-futbol-o" aria-hidden="true"></i>',
      value: 'Ball',
      message: 'You win a Ball',
    },{
      text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>',
      value: 'Snow',
      message: 'You win a Snow',
    },{
      text: '<i class="fa fa-refresh fa-spin" aria-hidden="true"></i>',
      value: 'Spin',
      message: 'You win a Spin',
    },{
      text: '<i class="fa fa-book" aria-hidden="true"></i>',
      value: 'Book',
      message: 'You win a Book',
    },{
      text: '<i class="fa fa-battery-full" aria-hidden="true"></i>',
      value: 'Battery',
      message: 'You win a Battery',
    },{
      text: '<i class="fa fa-beer" aria-hidden="true"></i>',
      value: 'Beer',
      message: 'You win a Beer',
    },{
      text: '<i class="fa fa-gamepad" aria-hidden="true"></i>',
      value: 'Gamepad',
      message: 'You win a Gamepad',
    },{
      text: '<i class="fa fa-puzzle-piece" aria-hidden="true"></i>',
      value: 'Puzzle Piece',
      message: 'You win a Puzzle Piece',
    }
  ];

  $('.roller-1 ,.roller-2 ,.roller-3').eroller({
    items  : items,
    key    : 'text',
    align   : 'vertical',
  });
  
  // Buttons
  $('.game-roller').on('click','.start-spin',function(){
    var randomWinner  = items[Math.floor(Math.random() * items.length)];
    $('.game-roller .roller-1').eroller('start','value',randomWinner.value,8000);
    randomWinner  = items[Math.floor(Math.random() * items.length)];
    $('.game-roller .roller-2').eroller('start','value',randomWinner.value,7500);
    randomWinner  = items[Math.floor(Math.random() * items.length)];
    $('.game-roller .roller-3').eroller('start','value',randomWinner.value,7000);
    
    $('.game-roller b.message').text('Rolling...');
    $(".game-roller .start-spin").prop("disabled", true);
  });
  
  //Events
  var winners = [],calc = 0;
  $('.game-roller').on('eroller.complete','.roller-1 ,.roller-2 ,.roller-3',function(event,item){
    
    winners[calc] = item.value;
    ++calc;
    if(calc === 3){
      var wins = getDuplicates(winners);
      
      if( wins.length === 0 )
        $('.game-roller b.message').html('You win Nothing' );
      else{
        $('.game-roller b.message').html('You win ' +(wins.length + 1)+ ' '+wins[0]+'\'s' );
      }
      $(".game-roller .start-spin").prop("disabled", false);
      calc = 0;
    }
  });
});
</script>

Player VS Player Example

Preview
HTML
Javascript
CSS
Full Code


<div class="players-roller">
  <div class="player-1"></div>
  <div class="p-vs-p"><b>VS</b></div>
  <div class="player-2"></div>
  <div class="players-name"><span class="player-1-name">&nbsp;</span><span class="player-2-name">&nbsp;</span></div>
  <div class="text-center">
    <button type="button" class="btn btn-primary start-spin">Start</button>
  </div>
</div>


function vsWinners(items,exclude){
  var winner = items[Math.floor(Math.random() * items.length)];
  if(winner.playerName === exclude)
    return vsWinners(items,exclude);
  return winner;
}
jQuery(document).ready(function($){
  var playersData = [
    {
      image : './players/player-1.jpg',
      playerName: 'Aberdeen',
    },{
      image : './players/player-2.jpg',
      playerName: 'Aliz',
    },{
      image : './players/player-3.jpg',
      playerName: 'Clea',
    },{
      image : './players/player-4.jpg',
      playerName: 'Lucas',
    },{
      image : './players/player-5.jpg',
      playerName: 'Ethan',
    },{
      image : './players/player-6.jpg',
      playerName: 'Aiden',
    },{
      image : './players/player-7.jpg',
      playerName: 'Federica',
    },{
      image : './players/player-8.jpg',
      playerName: 'Emanuella',
    },{
      image : './players/player-9.jpg',
      playerName: 'Oliver',
    },{
      image : './players/player-10.jpg',
      playerName: 'Grayson',
    },{
      image : './players/player-11.jpg',
      playerName: 'Kitty',
    },{
      image : './players/player-12.jpg',
      playerName: 'Samuel',
    },{
      image : './players/player-13.jpg',
      playerName: 'Trixie',
    },{
      image : './players/player-14.jpg',
      playerName: 'Cicely',
    },{
      image : './players/player-15.jpg',
      playerName: 'Nathan',
    }
  ];
  
  $('.example-4 .player-1').eroller({
    items     : playersData,
    align     : 'vertical',
    indicator : false,
  });
  $('.example-4 .player-2').eroller({
    items     : playersData,
    align     : 'vertical',
    to        : 'top',
    indicator : false,
  });
  
  // Buttons
  $('.example-4').on('click','.start-spin',function(){
    
    var player1  = playersData[Math.floor(Math.random() * playersData.length)];
    $('.example-4 .player-1').eroller('start','playerName',player1.playerName, 7000 );
    
    var player2  = vsWinners(playersData,player1.playerName);
    $('.example-4 .player-2').eroller('start','playerName',player2.playerName, 7000 );
    
    $('.example-4 .player-1-name').html('&nbsp;');
    $('.example-4 .player-2-name').html('&nbsp;');
    
    $(".example-4 .start-spin").prop("disabled", true);
    $(".example-4 .panel-tabs a").addClass("disabled");
  });
  
  //Events
  $('.example-4').on('eroller.complete','.player-1',function(event,player){
    $('.example-4 .player-1-name').html(player.playerName);
  });
  
  $('.example-4').on('eroller.complete','.player-2',function(event,player){
    $('.example-4 .player-2-name').html(player.playerName);
  });
});


.players-roller {
  width: 270px;
  margin-left: auto;
  margin-right: auto;
}
.players-roller .player-1,
.players-roller .player-2 {
  width: 100px;
  height: 100px;
  border-color: #fefefe;
  border-radius: 10px;
}
.players-roller .player-1 .er-item ,
.players-roller .player-2 .er-item {
  width: 100px;
  height: 100px;
  margin-top: 6px;
  margin-bottom: 6px;
  border-color: #fefefe;
}
.players-roller .p-vs-p {
  display: inline-block;
  width: 60px;
  height: 100px;
  line-height: 100px;
  vertical-align: top;
  font-size: 30px;
  color: #ffffff;
}
.players-roller .player-1-name,
.players-roller .player-2-name {
  text-align: center;
  display: inline-block;
  width: 100px;
  box-sizing: border-box;
  padding: 5px 10px;
  font-size: 15px;
  font-weight: bold;
  border-color: transparent;
}
.players-name:after,.players-name:before {
  display: table;
  content: " "
}
.players-name:after{
  clear: both
}
.players-roller .player-1-name{
  float: left;
}
.players-roller .player-2-name {
  float: right;
}


<div class="players-roller">
  <div class="player-1"></div>
  <div class="p-vs-p"><b>VS</b></div>
  <div class="player-2"></div>
  <div class="players-name"><span class="player-1-name">&nbsp;</span><span class="player-2-name">&nbsp;</span></div>
  <div class="text-center">
    <button type="button" class="btn btn-primary start-spin">Start</button>
  </div>
</div>

<style>
.players-roller {
  width: 270px;
  margin-left: auto;
  margin-right: auto;
}
.players-roller .player-1,
.players-roller .player-2 {
  width: 100px;
  height: 100px;
  border-color: #fefefe;
  border-radius: 10px;
}
.players-roller .player-1 .er-item ,
.players-roller .player-2 .er-item {
  width: 100px;
  height: 100px;
  margin-top: 6px;
  margin-bottom: 6px;
  border-color: #fefefe;
}
.players-roller .p-vs-p {
  display: inline-block;
  width: 60px;
  height: 100px;
  line-height: 100px;
  vertical-align: top;
  font-size: 30px;
  color: #ffffff;
}
.players-roller .player-1-name,
.players-roller .player-2-name {
  text-align: center;
  display: inline-block;
  width: 100px;
  box-sizing: border-box;
  padding: 5px 10px;
  font-size: 15px;
  font-weight: bold;
  border-color: transparent;
}
.players-name:after,.players-name:before {
  display: table;
  content: " "
}
.players-name:after{
  clear: both
}
.players-roller .player-1-name{
  float: left;
}
.players-roller .player-2-name {
  float: right;
}
</style>

<script>
function vsWinners(items,exclude){
  var winner = items[Math.floor(Math.random() * items.length)];
  if(winner.playerName === exclude)
    return vsWinners(items,exclude);
  return winner;
}
jQuery(document).ready(function($){
  var playersData = [
    {
      image : './players/player-1.jpg',
      playerName: 'Aberdeen',
    },{
      image : './players/player-2.jpg',
      playerName: 'Aliz',
    },{
      image : './players/player-3.jpg',
      playerName: 'Clea',
    },{
      image : './players/player-4.jpg',
      playerName: 'Lucas',
    },{
      image : './players/player-5.jpg',
      playerName: 'Ethan',
    },{
      image : './players/player-6.jpg',
      playerName: 'Aiden',
    },{
      image : './players/player-7.jpg',
      playerName: 'Federica',
    },{
      image : './players/player-8.jpg',
      playerName: 'Emanuella',
    },{
      image : './players/player-9.jpg',
      playerName: 'Oliver',
    },{
      image : './players/player-10.jpg',
      playerName: 'Grayson',
    },{
      image : './players/player-11.jpg',
      playerName: 'Kitty',
    },{
      image : './players/player-12.jpg',
      playerName: 'Samuel',
    },{
      image : './players/player-13.jpg',
      playerName: 'Trixie',
    },{
      image : './players/player-14.jpg',
      playerName: 'Cicely',
    },{
      image : './players/player-15.jpg',
      playerName: 'Nathan',
    }
  ];
  
  $('.example-4 .player-1').eroller({
    items     : playersData,
    align     : 'vertical',
    indicator : false,
  });
  $('.example-4 .player-2').eroller({
    items     : playersData,
    align     : 'vertical',
    to        : 'top',
    indicator : false,
  });
  
  // Buttons
  $('.example-4').on('click','.start-spin',function(){
    
    var player1  = playersData[Math.floor(Math.random() * playersData.length)];
    $('.example-4 .player-1').eroller('start','playerName',player1.playerName, 7000 );
    
    var player2  = vsWinners(playersData,player1.playerName);
    $('.example-4 .player-2').eroller('start','playerName',player2.playerName, 7000 );
    
    $('.example-4 .player-1-name').html('&nbsp;');
    $('.example-4 .player-2-name').html('&nbsp;');
    
    $(".example-4 .start-spin").prop("disabled", true);
    $(".example-4 .panel-tabs a").addClass("disabled");
  });
  
  //Events
  $('.example-4').on('eroller.complete','.player-1',function(event,player){
    $('.example-4 .player-1-name').html(player.playerName);
  });
  
  $('.example-4').on('eroller.complete','.player-2',function(event,player){
    $('.example-4 .player-2-name').html(player.playerName);
  });
});
</script>

Usage

    
//add a link to the css file in your <head>:
<link rel="stylesheet" href="http://example.com/css/eroller.min.css">
//Before your closing </body> tag add:
<script src="http://example.com/js/eroller.min.js">

        
//Code to execute after loading the roller plugin
jQuery(document).ready(function($){
  
  var items = [
    {
      name: 'Adnane',
    },{
      name: 'Zarrouk',
    },{
      name: 'Aberdeen',
    },{
      name: 'Aliz',
    },{
      name: 'Clea',
    },{
      name: 'Lucas',
    },{
      name: 'Ethan',
    },{
      name: 'Aiden',
    },{
      name: 'Federica',
    },{
      name: 'Emanuella',
    },{
      name: 'Oliver',
    },{
      name: 'Grayson',
    },{
      name: 'Kitty',
    },{
      name: 'Samuel',
    },{
      name: 'Trixie',
    },{
      name: 'Cicely',
    },{
      name: 'Nathan',
    }
  ];

  $(".roller").eroller({
    items  : items,
  });

  //Start Button
  $(document).on('click','.start-spin',function(){
    var winner = 'Snow';
    $(".roller").eroller('start','name',winner);
  });
  
});

Options

Name	Type	Default	Description
items	object	`[]`	Your items option should have JSON like the following format Example `[ {text: '0',value: 'Zéro'}, {text: '1',value: 'One'} ]`
key	string	`text`	Allows you to set "item" text or html from items object by key.
speed	integer	`8000`	Transition speed
indicator	boolean	`true`	Enables Indicator, have two boolean values : `true` or `false`
itemPos	string	`center`	Allows you to align the winner item position with indicator, have two values : `center` or `random`
align	string	`horizontal`	Allows you to align the Roller Styles, have two values : `horizontal` or `vertical`
direction	string	`left`	Allows you to set the animation direction based to `"align"` value. if `align` value is `horizontal` then use : `left` or `right`. if `align` value is `vertical` then use : `top` or `bottom`.
easing	string	`default`

Methods

Start

$('.classname').eroller('start',object_key (required),object_value (required),speed (optional));

Use Start Method to start rolling.

object_key allows you to select winner by key thats are available in item object.

object_value allows you to set the winner value based to selected object_key.

speed allows you to set the speed of animation.

stop

$('.classname').eroller('stop');

Use Stop Method to stop rolling animation, This option will stop animation in current position and will not select the winner.

Finish

$('.classname').eroller('finish');

Use Stop Method to Finish rolling animation, This option will finish animation completly and will move directly to winner position.

Clear

$('.classname').eroller('clear');

Use Clear Method to stop evreything and to reset The Roller position, This option will stop animation and will not select the winner.

Destroy

$('.classname').eroller('destroy');

Use Destroy Method to Destroy selected Roller, This option will remove the roller items and will reset all of the parameters.

Events

Init


$(document).on('eroller.init','.classname',function(event){
  //do something on init
});

Start


$(document).on('eroller.start','.classname',function(event){
  //do something on start
});

Stop


$(document).on('eroller.stop','.classname',function(event){
  //do something on stop
});

Progress


$(document).on('eroller.progress','.classname',function(event){
  //do something on progress
});

Complete


$(document).on('eroller.complete','.classname',function(event,item){
  //do something on complete
});

Finish


$(document).on('eroller.finish','.classname',function(event,item){
  //do something on finish
});

Clear


$(document).on('eroller.clear','.classname',function(event){
  //do something on clear
});

Please report issues! Thanks for checking it out and supporting 22Codes Dev Team.