Spin360

The spin360 component consists of a series of images that iterate on drag or with arrow keys to produce a 360 degree view of a subject.

Basic example

This is a fairly typical 360 viewer with default options. Autoplay is enabled and there are no controls. Drag with your finger or mouse to spin the ring.

Reverse image order

If the images seem to spin in the opposite direction than the drag order, use the reverse: true option to flip the sequence. In this car example, the 360 needs this option set. Autoplay is disabled and there are no controls.

Longer play time, simple controls

This example has an added animation at the end so it's less of a pure 360 rotation and more of an animation you can scrub through. A custom interval is used because this is a long animation.

Controls: Left, Right, Play/Pause

This example turns on the manual controls to rotate left/right and play/pause but doesn't autoplay. It also adds a longer interval to give the animation longer to run.

Controls with custom control labels

A typical 360 view for a shoe without autoplay with 5 second autoplay delay, controls with custom labels, and faster interval.

Image Configuration

The Spin360 images sources can be configured with a policy and widths.