Set up your HTML markup.
Move superwheel folder into your project folder
in the page <head> add the superwheel.min.css resource.
Add superwheel.min.js before your closing <body> tag and after jQuery script.
Initialize your wheel in your script file or an inline script tag
Add Spinner Button code (On click spin):
Note : you can change winner selector like this example :
When complete, your HTML should look something like:
You can manage each slice completly,
Like (text,message,color,background,value)
also you can add custom data (custom data can be handled on callbacks):
Set up your HTML markup.
[{name:'Win',message:'You win',value:'win'},{name:'Lose',message:'You lose',value:'lose'}]
Description: Object containing slice items.
Show Example
Hide Example
value
Description: You can change winner key by changing the option selector, for example if item Object have akey like "custom_key" then you can make winner selector like :selector: "custom_key".
Note: When you change selector option to other item key then you will need to give the value of winner based to the value of the new selector.
Show Example
Hide Example
{background : "#333", selected : {background: "#ddd", color: "#333"}}
Description: Set general slice settings.
Note: slice->selected object is an option can be used with the option ( type: "color" ) only, not required with ( type: "spinner" ).
Show Example
Hide Example
{color: '#ccc', size : 14, offset: 8, letterSpacing: 0, orientation: 'v', arc: false}
Description: Set general slice text styles.
Show Example
Hide Example
{width: 3, color: "#757575"}
Description: Set general slice lines (left/right) color/width.
Show Example
Hide Example
{width : 6, color : "#757575"}
Description: Set wheel outer line color/width.
Show Example
Hide Example
line: {width: 3, color: "#757575"}
Description: Set wheel inner line color/width.
Show Example
Hide Example
{width: 30, background: '#FFFFFF00', rotate: true, class: "", image: {url: "", width: 45}, html: {template: '', width: 45}}
Description: Set wheel center settings "image/color/html/width/background".
Note: {animate : true,background: "#E0E0E0"}
Description: Set Marker animation and color.
Show Example
Hide Example
superWheel
Description: Set wheel animation Easing.
Note: Use jQuery Easing plugin for more Easing Effects.
Show Example
Hide Example
8000
Description: Set wheel animation Duration (ms).
Show Example
Hide Example
rotate
Description: Set wheel to spin with rotate Or color, if you set type to color, the wheel will use color animation instead of rotate animation.
Note: When you set the option type to color you will need to set animation background color in the option slice->selected, See code Example.
Show Example
Hide Example
8
Description: Set number of rotates before selecting the winner.
Show Example
Hide Example
6
Description: The rate (in milliseconds) at which animations fire..
Show Example
Hide Example
callback events. Use them as shown below
Methods are called on superWheel instances through the superWheel method itself.