See the Pen 360 Degree Card View by Creative Site IT Services Pvt Ltd (@creativesite) on CodePen.
The Setup.
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.
![](path/to/first/image.jpg)
Next: copy this in yourtag
.rollerblade-img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
.rollerblade-drag {
cursor:move;
}
Initiate.
Make sure jQuery is included in your page
add this line before end of the body tag
and then select the container element 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'.
$(document).ready(function(){
// 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'
]});
})
Options
Rollerblade accepts the following options:
Property Name | Type | Values | Description | Default |
---|---|---|---|---|
sensitivity | int | Any integer | The lower the number, the more sensitive the rotator will be. The number value represents distance in pixels between each frame change. | 35 |
drag | bool | true/false | Determines if the rotator is draggable. If set to false, image will rotate on any mouse movement along the X axis of the page. | true |
auto | bool | true/false | 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. | false |
edgeStop | bool | true/false | Determines if the rotator should keep on rotating when the first or last image is reached. | false |