Install

npm i next-360-image-viewer
# Or
yarn add next-360-image-viewer
# Or
pnpm i next-360-image-viewer

Compatibility

• Next.js: 13.0.0 or higher
• React: 16.8 or higher (including React 19)
• TypeScript: 5.0 or higher

Examples

Basic Usage

import { NEXT_IMAGE_TURNTABLE } from 'next-360-image-viewer';

const images = [
  'https://via.placeholder.com/1920x1080?text=1',
  'https://via.placeholder.com/1920x1080?text=2',
  'https://via.placeholder.com/1920x1080?text=3',
];

export const VIEWER = () => {
  return (
    <>
      <NEXT_IMAGE_TURNTABLE images={images} />
    </>
  );
};

Autoplay with Controls

import { useRef } from 'react';
import { NEXT_IMAGE_TURNTABLE, type TURNTABLE_REF } from 'next-360-image-viewer';

export const AUTOPLAY_VIEWER = () => {
  const turntableref = useRef<TURNTABLE_REF>(null);

  const HANDLE_START_AUTOPLAY = () => {
    turntableref.current?.START_AUTOPLAY();
  };

  const HANDLE_STOP_AUTOPLAY = () => {
    turntableref.current?.STOP_AUTOPLAY();
  };

  return (
    <div>
      <NEXT_IMAGE_TURNTABLE
        ref={turntableref}
        images={images}
        autoplay={true}
        autoplayspeed={1500}
        autoplaydirection="forward"
        autopauseonhover={true}
      />
      <button onClick={HANDLE_START_AUTOPLAY}>Start Autoplay</button>
      <button onClick={HANDLE_STOP_AUTOPLAY}>Stop Autoplay</button>
    </div>
  );
};

Props

| Props | Type | Required | Default Value | | --------------------- | :------------------------ | :------: | :------------ | | images | string[] | ✓ | undefined | | initialimageindex | number | | 0 | | movementsensitivity | number | | 20 | | onload | function | | undefined | | className | string | | undefined | | autoplay | boolean | | false | | autoplayspeed | number | | 2000 | | autoplaydirection | 'forward' \| 'backward' | | 'forward' | | autopauseonhover | boolean | | true |

Autoplay Controls

Use a ref to access autoplay control functions:

const turntableref = useRef<TURNTABLE_REF>(null);

// Available methods:
turntableref.current?.START_AUTOPLAY();
turntableref.current?.STOP_AUTOPLAY();
turntableref.current?.PAUSE_AUTOPLAY();
turntableref.current?.RESUME_AUTOPLAY();

// Available state:
turntableref.current?.isautoplayactive; // boolean
turntableref.current?.ispaused; // boolean
turntableref.current?.activeimageindex; // number