Easy way to create a 360° interactive image rotator.

INTRODUCTION

With Rollerblade, you can easily give your webpage visitors a great 360° viewing experience with your products, images, or anything else you can think of::

SETUP

Check our demo at codepen or on Rollerblade's homepage 

1. INCLUDES

<link rel='stylesheet prefetch' href='http://www.iamapioneer.com/plugins/rollerblade/js/rollerblade/rollerblade.css'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='http://www.iamapioneer.com/plugins/rollerblade/js/rollerblade/rollerblade.js'></script>

2. HTML

<div id="laptop">
    <img class="rollerblade-img" src="http://www.iamapioneer.com/plugins/rollerblade/img/macbook/front.png">
</div>

3. JAVASCRIPT

$(function(){
    var rootPath = 'http://www.iamapioneer.com/plugins/rollerblade/img/';

    $("#laptop").rollerblade({
		imageArray : [
			rootPath + 'macbook/front.png',
			rootPath + 'macbook/front-side-right.png',
			rootPath + 'macbook/side-right.png',
			rootPath + 'macbook/back-side-right.png',
			rootPath + 'macbook/back.png',
			rootPath + 'macbook/back-side-left.png',
			rootPath + 'macbook/side-left.png',
			rootPath + 'macbook/front-side-left.png'
		],
		sensitivity : 50,
		drag : true
	});
});

4. PREVIEW

Click & drag on the image, you will see how it works

See the Pen egrzs by Thanh Nguyen (@genievn) on CodePen.

OPTIONS