Drag across the image
Move left or right over the image to scrub through each frame. The same interaction works with mouse, touch, and pen input.
new Turntable("#ttPointer", {
axis: "x"
});Bind playback to a slider
The range input can drive the image sequence, and dragging the image keeps the control synchronized with the active frame.
new Turntable("#ttRange", {
controller: document.getElementById("rangeCtl")
});Let the sequence run
Use an interval value to advance frames automatically. This pattern works well for passive product previews and ambient image loops.
new Turntable("#ttAuto", {
autorotate: 120
});Tie frames to page position
Scroll-driven playback maps the image position against the viewport. Move through the runway below to see the sequence change.
new Turntable("#ttScroll", {
axis: "scroll",
scrollStart: "middle"
});Scrub from top to bottom
Switch the axis to vertical when the surrounding interface gives users more room to move up and down than side to side.
new Turntable("#ttVertical", {
axis: "y"
});Flip the frame direction
Use reverse mode when the source images are ordered opposite to the interaction you want users to feel.
new Turntable("#ttReverse", {
axis: "x",
reverse: true
});Start, stop, and jump
Keep a Turntable instance and call methods directly when your page needs custom playback buttons or external navigation.
const player = new Turntable("#ttApi");
player.setFrame(4);
player.start(160);
player.stop();