Rollerblade.js – Create 360° Interactive Images

First, include rollerblade.css at the top of your page with your CSS. Or, since the contents of that file are so small, simply copy and paste the rollerblade.css contents into your main CSS file.
Next: Rollerblade targets a container element with an image element inside that has the class of “rollerblade-img”. Make the src of the image the path to the first image in your rotator.

                        
<div id="target">
    <img src="path/to/first/image.jpg">
</div>
                        

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!

                        
    // You can specify an array of images 
    // outside of the rollerblade method,
    // and then pass it in, as so:

    var arrayOfImages = [
        'path/to/image/1.jpg',
        'path/to/image/2.jpg',
        'path/to/image/3.jpg',
        'path/to/image/4.jpg',
        'and/so/on.jpg'
    ];

    $("#target").rollerblade({imageArray:arrayOfImages});

    // OR you can create the array directly in the 
    // options object, as so:

    $("#target").rollerblade({imageArray:[
        'path/to/image/1.jpg',
        'path/to/image/2.jpg',
        'path/to/image/3.jpg',
        'path/to/image/4.jpg',
        'and/so/on.jpg'
    ]});
                        

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.

                        

    // Defaults.
    $("#target").rollerblade({
        imageArray: [yourArray],
        sensitivity: 35,
        drag: true,
        auto: false
    });