Touch-enabled 360 Image Preview In JavaScript – Threesixty

Category: Image , Javascript | November 23, 2022
Views Total:812 views
Official Page:Go to website
Last Update:November 23, 2022


Touch-enabled 360 Image Preview In JavaScript – Threesixty


Threesixty is a JavaScript library that generates a draggable, touch-enabled 360 product viewer from a sequence of images defined in a sprite image (or an image array).

Your users can rotate the product images with mouse drag, arrow keys, touch-swipe event, etc.

How to use it:

To get started, you first need to insert your product images at different angles into a sprite image or an image array.

myImg = [

Then download and insert the Threesixty.js script into the document.

<script src="/path/to/threesixty.js"></script>

Create a container to place the product image.

<div id="threesixty"></div>

Initialize the Threesixty with the following options.

  • image: the path to the sprite image
  • width/height: image size
  • count: the total number of images
  • perRow: how many images per row
  • speed: rotate speed
var threesixty = new ThreeSixty(document.getElementById('threesixty'), {
    image: 'sprite.jpg',
    width: 320,
    height: 320,
    count: 31,
    perRow: 4,
    speed: 100

You can also create navigation buttons to rotate the product images with click/tap events.

<button class="button" id="prev">Prev</button>
<button class="button" id="next">Next</button>
var threesixty = new ThreeSixty(document.getElementById('threesixty'), {
    prev: document.getElementById('prev'),
    next: document.getElementById('next')

Activate the 360 product viewer.;

All default options.

var threesixty = new ThreeSixty(document.getElementById('threesixty'), { 
    width: 300,
    height: 300,
    count: 0,
    perRow: 0,
    speed: 100,
    dragTolerance: 10,
    swipeTolerance: 10,
    draggable: true,
    swipeable: true,
    keys: true,
    inverted: false

More API methods.

// start;
// stat in oposite direction;
// stop
// toggle
// go to next; 
// back to previous
// go to a frame
// destroy


v1.2.4 (11/23/2022)

  • Update

v1.2.3 (04/24/2022)

  • Use window instead of global


  • Fix resizing height detection

You Might Be Interested In:

Leave a Reply