Vertical Roller

Roll to win


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: 300px;
  font-size: 24px;
}