Mode · Pointer

Drag across the frame

PointerEvents unify mouse, touch, and pen — one handler covers every input. Drag horizontally to scrub through frames.

new Turntable("#myTurntable", {
  axis: "x",
});

Mode · Controller

Bind to a range input

Pass an <input type="range"> as the controller option. The plugin wires up min/max/step and keeps both directions in sync.

const input = document.querySelector("input[type=range]");

new Turntable("#myTurntable", {
  controller: input,
});

Mode · Autorotate

Hands-off cycling

Pass autorotate a millisecond interval and the plugin advances frames on its own. Call .stop() to pause, .start() to resume.

new Turntable("#myTurntable", {
  autorotate: 120, // ms per frame
});

Mode · Scroll

Driven by scroll position

Set axis: "scroll" and the active frame tracks the turntable's position relative to the viewport's middle. IntersectionObserver shuts the handler off when the element is off-screen.

new Turntable("#myTurntable", {
  axis: "scroll",
  scrollStart: "middle", // or "top" | "bottom"
});

Keep scrolling ↓

Scroll

Keep going