Skip to content


Repository files navigation


npm version CircleCI Maintainability

Turn image sprite into 360 degree image.


View on Codepen -


ThreeSixty is available as an ES6 module via NPM package

npm i @mladenilic/threesixty.js

Then you can import it with

import ThreeSixty from '@mladenilic/threesixty.js';

Or, you can also use it via a CDN

<script src=""></script>


No dependencies! Written in plain javascript.


const threesixty = new ThreeSixty(document.getElementById('threesixty'), {
  image: 'images/example.jpg',
  count: 19,
  perRow: 4,
  prev: document.getElementById('prev'),
  next: document.getElementById('next')


  // Source image url
  image: 'images/example.jpg', // Also supports passing an array of images

  // Sprite options (If array of images are provided, these options are ignored)
  count: 30,                   // Total number of images. Default: 0
  perRow: 5,                   // Number of images per row. Default: 0

  // Width & Height
  width: 300,  // Image width. Default 300
  height: 300, // Image height. Default 300

  // Navigation
  prev: document.getElementById('prev'), // Previous button element. Default: null
  next: document.getElementById('next'), // Next button element. Default: null
  keys: true,         // Rotate image on arrow keys. Default: true
  draggable: true,    // Rotate image by dragging. Default: true
  swipeable: true,    // Rotate image by swiping on mobile screens. Default: true
  dragTolerance: 10,  // Rotation speed when dragging. Default: 10
  swipeTolerance: 10, // Rotation speed when swiping. Default: 10
  swipeTarget: document.getElementById('wrapper'), // Element which will listen for drag/swipe events. Default: Image container

  // Rotation settings
  speed: 100,     // Rotation speed during 'play' mode. Default: 10
  inverted: false // Inverts rotation direction

Array of images

As an alternative to sprite image, ThreeSixty also supports using array of images:

new ThreeSixty(document.getElementById('threesixty'), {
  image: [


In this case options count and perRow are ignored.


Single frame rotation:;

Focus n-th frame:


threesixty.goto(0); // Reset position
threesixty.goto(1); // Focus 1st frame
threesixty.goto(-1); // Focus last frame

Image rotation:

// Start rotation;

// Rotate in oposite direction;

// Rotate only 2 times, then stop automatically, 2);

// Stop rotation

// Play/Stop rotation

Clean up registered events:



All contributions are welcome. To get started, clone repo and npm start


Licensed under the MIT license.