Pointer mode

## 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"
    });

Controller mode

## 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")
    });

Autorotate mode

## 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
    });

Scroll mode

## 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"
    });

Scroll down
Approach

Continue
Vertical axis

## 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"
    });

Reverse order

## 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
    });

API controls

## 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();