Make sure jQuery is included in your page, and then, inside of a document ready function, select the container element that we specified in the setup and call the rollerblade method. At the very minimum, you have to pass in an array of image urls as a property of the options object. The property must be called ‘imageArray’.
Thats it! You will now have a working rollerblade rotator.
Just style and position your element to your liking!
Rollerblade.js allows you to create as many rotators on one page as you would like. Just create new elements from our setup step, create a new array of images in your javascript, and call the rollerblade method on another object. Simple!
Options.
You can add more settings to the options object!
sensitivity : This is an integer value that determines how sensitive the rotator is to the user’s mouse movement.
drag : This is a boolean value that determines if the rollerblade rotator activates during a drag. The default is true. When set to false, the rollerblade rotator will rotate automatically with any horizontal mouse movement.
auto : Determines if rotator should spin by itself. Default is set to false. If set to true, rotator will spin and user interaction will be disabled.
More Info.
Rollerblade.js works on desktops, tablets, and smartphones (touch enabled). For all mobile devices, the rollerblade rotator will be activated when a user slides their finger from left to right.
Image preloading is used to cache the images from your array to make sure the rotator performs as fast as possible.
Rollerblade.js works well in IE9+.