Interactive 360º Image Rotator/Viewer Plugin - Turntable.js v2

Turntable is a lightweight, frame-flipping 3D rotator that turns a sequence of still images into a 360-degree product viewer you can drive with pointer movement, scroll position, or automatic cycling. 

Create a list of <li> elements marked up with data-img-src attributes, call new Turntable(selector, options), and the library manages frame switching, image loading, and input handling from there.

Turntable Version 2 is a complete rewrite. jQuery is gone. The distribution now ships as ESM, CommonJS, and a standalone IIFE build that puts Turntable on window.

The HTML structure from v1 carries over unchanged, so switching an existing project from the jQuery plugin to v2 is a two-line script change.

More 360-degree Image Viewers:

• 10 Best 360 Degree Product View Plugins In JavaScript

Features:

• Zero external dependencies and roughly 4 KB minified in the IIFE build.
• Three drive modes: horizontal pointer position, vertical pointer position, and viewport scroll position.
• Autorotate support with a configurable milliseconds-per-frame interval that starts on init.
• Two-way binding with an <input type="range"> element for manual frame scrubbing alongside automatic playback.
• PointerEvents-based input that covers mouse, touch, and stylus through one handler, no UA sniffing required.
• requestAnimationFrame coalesces rapid pointer and scroll events to one DOM write per paint cycle.
• IntersectionObserver gates the scroll handler so off-screen instances perform no scroll work.
• Image creation through .src assignment on a programmatically created <img> element, no innerHTML writes.
• Direct-child :scope > ul > li scoping prevents nested lists in author markup from interfering with the frame set.
• Ships as ESM, CJS, and IIFE with minified variants, plus a dedicated turntable.css for required layout and touch handling rules.
• Public methods for frame jumping, autorotate start and stop, measurement refresh, and full instance teardown.

Use Cases:

• A product page for a camera, watch, or sneaker needs to show the item from every angle.
• An e-commerce listing for footwear or furniture gets a pointer-driven rotator beside the product description.
• A creative portfolio or brand hero section uses autorotate to cycle through a rendered frame sequence on load.
• A product configurator or admin tool needs programmatic frame control.

How to use it:

1. Install and Include the Required CSS/JS Files. For a browser-first setup, download the compiled files and include the CSS before the IIFE script. Turntable v2 does not require jQuery. The browser build exposes Turntable on window.

<link rel="stylesheet" href="dist/turntable.css">
<script src="dist/turntable.iife.min.js"></script>

2. For npm projects, install the scoped package and import the class plus stylesheet.

npm install @goboldlyforward/turntable

import { Turntable } from "@goboldlyforward/turntable";
import "@goboldlyforward/turntable/css";

3. Create a container with a direct ul child. Each frame uses a direct li element with a data-img-src value. Turntable creates the img elements for you. It reads the data-img-src values and assigns each URL through the DOM src property.

<div id="shoeSpin" class="turntable">
  <ul>
    <li data-img-src="images/shoe-angle-01.webp"></li>
    <li data-img-src="images/shoe-angle-02.webp"></li>
    <li data-img-src="images/shoe-angle-03.webp"></li>
    <li data-img-src="images/shoe-angle-04.webp"></li>
    <li data-img-src="images/shoe-angle-05.webp"></li>
    <li data-img-src="images/shoe-angle-06.webp"></li>
  </ul>
</div>

4. Initialize Turntable to create a pointer-driven 360-degree image viewer.

const cameraViewer = new Turntable("#cameraSpin", {
  axis: "x"
});

5. All available configuration options.

• axis ("x" | "y" | "scroll"): Sets the input direction for frame selection. Use "x" for horizontal pointer movement, "y" for vertical pointer movement, or "scroll" for viewport-driven frame changes.
• reverse (boolean): Reverses frame order during interaction. Use it when your source images rotate in the opposite direction from the desired UI behavior.
• scrollStart ("top" | "middle" | "bottom"): Sets the viewport anchor for scroll-driven rotation. This option applies only when axis uses "scroll".
• autorotate (false | number): Starts automatic frame cycling on initialization. Pass a number to set the milliseconds per frame.
• controller (HTMLInputElement | null): Connects a range input to the viewer. User range changes set the frame, and viewer frame changes update the range value.

6. API methods.

const viewer = new Turntable("#productTurntable", {
  axis: "x"
});

// Jump to a specific frame index.
// The class clamps the value to the available frame range.
viewer.setFrame(3);

// Start automatic frame cycling.
// Pass a number to override the configured interval.
viewer.start(200);

// Stop automatic frame cycling.
viewer.stop();

// Recalculate frame sections.
// Call this after layout changes or after a hidden container becomes visible.
viewer.update();

// Remove listeners, observers, timers, and the active frame class.
viewer.destroy();

Changelog:

v2 (2026-05-30)

• Full rewrite. Drops jQuery; ships as ESM / CJS / IIFE.

About Author:

Author: Morgan J Lopes

Website: http://polarnotion.github.io/turntable/

---

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