This time I will share jQuery Plugin and tutorial about Interactive 360º Image Rotator Plugin – Turntable.js, hope it will help you in programming stack.
Turntable.js is a simple jQuery slider plugin which helps you create an interactive, responsive image rotator to provide a great 360º viewing experience with your product images. The plugin allows you to rotate through a series of images with different angles when your mouse (or finger) sweeps across a container.
How to use it:
1. Add your images to the slider/rotator using the data-img-src attribute on the li element.
01 |
<div id="example" class="turntable"> |
03 |
<li data-img-src="1.jpg"></li> |
04 |
<li data-img-src="2.jpg"></li> |
05 |
<li data-img-src="3.jpg"></li> |
06 |
<li data-img-src="4.jpg"></li> |
07 |
<li data-img-src="5.jpg"></li> |
08 |
<li data-img-src="6.jpg"></li> |
09 |
<li data-img-src="7.jpg"></li> |
10 |
<li data-img-src="8.jpg"></li> |
11 |
<li data-img-src="9.jpg"></li> |
12 |
<li data-img-src="10.jpg"></li> |
13 |
<li data-img-src="11.jpg"></li> |
14 |
<li data-img-src="12.jpg"></li> |
15 |
<li data-img-src="13.jpg"></li> |
16 |
<li data-img-src="14.jpg"></li> |
2. The required CSS to style the image list.
01 |
.turntable { margin: 0px; } |
09 |
list-style-type: none; |
13 |
.turntable ul li img { width: 100%; } |
15 |
.turntable ul li.active { display: block; } |
3. Place jQuery library and the jQuery Turntable.js script at the end of the html document.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/turntable.js"></script> |
4. By default, the plugin will rotate through the images as your mouse moves along the x axis of the container. You can set the ‘axis’ to ‘y’ in the javascript like this:
1 |
$('#example').turntable({ |
About Author:
Author: Morgan J Lopes
Website: http://polarnotion.github.io/turntable/
This awesome jQuery plugin is developed by polarnotion. For more Advanced Usages, please check the demo page or visit the official website.
