Interactive 360º Image Rotator Plugin - Turntable.js

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.

<div id="example" class="turntable">
  <ul>
    <li data-img-src="1.jpg"></li>
    <li data-img-src="2.jpg"></li>
    <li data-img-src="3.jpg"></li>
    <li data-img-src="4.jpg"></li>
    <li data-img-src="5.jpg"></li>
    <li data-img-src="6.jpg"></li>
    <li data-img-src="7.jpg"></li>
    <li data-img-src="8.jpg"></li>
    <li data-img-src="9.jpg"></li>
    <li data-img-src="10.jpg"></li>
    <li data-img-src="11.jpg"></li>
    <li data-img-src="12.jpg"></li>
    <li data-img-src="13.jpg"></li>
    <li data-img-src="14.jpg"></li>
  </ul>
</div>

2. The required CSS to style the image list.

.turntable { margin: 0px; }

.turntable ul {
  padding: 0px;
  margin: 0px;
}

.turntable ul li {
  list-style-type: none;
  display: none;
}

.turntable ul li img { width: 100%; }

.turntable ul li.active { display: block; }

3. Place jQuery library and the jQuery Turntable.js script at the end of the html document.

<script src="/path/to/jquery.min.js"></script> 
<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:

$('#example').turntable({
  axis: 'x'
});

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.