Simple jQuery 360-degree Product Image Viewer - ThreeSixtyRotate

File Size: 403 KB
Views Total: 3496
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery 360-degree Product Image Viewer - ThreeSixtyRotate

ThreeSixtyRotate is a jQuery based product viewer that allows to automatically or manually rotate a sequence of images at different angles.

See also:

How to use it:

1. Prepare a sequence of product images in the same extension. For example: 1.png, 2.png, 3.png and so on.

2. Include the jQuery ThreeSixtyRotate plugin after jQuery library.

<script src="//"></script>
<script src="js/jquery.360rotate.js"></script>

3. Create an empty container for the image viewer.

<div class="demo">
  <p class="load">Now Loading...</p>

4. The required CSS styles.

.demo {
  position: relative;
  width: 480px;
  height: 270px;

.demo li {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-background-size: 100%;
  background-size: 100%;

.load {
  line-height: 270px;
  text-align: center;

5. Call the plugin on the container element you just created.

imgPath: 'img/', // Path to your product images.
imgEx: 'png', // All images must have this file extension
zeroPadding: 0, // Zero Padding (ex:1->0、01->1、001->2)
imgFirstNum: 1,
totalFrame: 23,
startFrame: 1,
clockwise: false, // false = counterclockwise
rotateSpeed: 1,
inertia: true,
autoRotate: false, // auto rotation
frameRate: 24,
overStop: true, // Pause on hover when autoRotate is true.
preload: true,
showDuration: 300

Change log:


  • fixed bugs.


  • fixed bugs.


  • fix for IE8

This awesome jQuery plugin is developed by 1026. For more Advanced Usages, please check the demo page or visit the official website.