Show Your Product Images in 3D Using Responsive Turntable.js Slider

Interested in creating a 3D view of any object? Here’s a simple jQuery script —  Turntable.js — that will help you create a 3D rotating slider to allow your website visitors check out any object from different directions.

Let’s create a responsive JQuery slider to showcase your products in 3D from different angles.

Turntable.js is a responsive JQuery slider that lets you rotate images using  mouse (or finger). Similar to a flipbook. It’s a new take on the jQuery slider which works on all devices — mobile phones & tablets!

Installing Turntable.js

Download Turntable.js and add the turntable.min.js in your weebpage — at the top or at the bottom of your html document. Now, call the turntable function on a list of images that you want to flip in 3D view style. Include jQuery as well in your webpage as Turntable.js is a jQuery script.

The Turntable.js package includes a minified CSS file. You can add this CSS file to your webpage or copy-paste the CSS into your stylesheet.

<div id="myTurntable" class="turntable">
  <ul>
    <li data-img-src="images/myPic1.jpg"></li>
    <li data-img-src="images/myPic2.jpg"></li>
    <li data-img-src="images/myPic3.jpg"></li>
    <li data-img-src="images/myPic4.jpg"></li>
    <li data-img-src="images/myPic5.jpg"></li>
    <li data-img-src="images/myPic6.jpg"></li>
    <li data-img-src="images/myPic7.jpg"></li>
    <li data-img-src="images/myPic8.jpg"></li>
    <li data-img-src="images/myPic9.jpg"></li>
    <li data-img-src="images/myPic10.jpg"></li>
    <li data-img-src="images/myPic11.jpg"></li>
    <li data-img-src="images/myPic12.jpg"></li>
    <li data-img-src="images/myPic13.jpg"></li>
    <li data-img-src="images/myPic14.jpg"></li>
  </ul>
</div>

Settings

Turntable.js accepts an object as a parameter. You can choose whether you want to flip the images on mouse movement along the X or Y axis of the container. Here’s how to define the X/Y axis rotation preference with the plugin.

$('#mySpinnyContainer').turntable(
  {axis: 'y'}
);

The plugin will default to the X axis if no option is provided.

Now, let us make some other necessary changes and add the additional codes. Oh no! It’s all that we have to do. Go, have fun with your 3D rotating images.