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;
}