ThreeSixty.js


Turn image sprite into 360 degree image.

!sample.gif

View on Codepen - http://codepen.io/mladenilic/full/zKOpmg/

$3

ThreeSixty is available as an ES6 module via NPM package
``
npm i @mladenilic/threesixty.js
`

Then you can import it with
`js
import ThreeSixty from '@mladenilic/threesixty.js';
`

Or, you can also use it via a CDN
`html

`




$3

No dependencies! Written in plain javascript.

$3

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

threesixty.play();
`


$3

`js
{
// 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
}
`

$3


As an alternative to sprite image, ThreeSixty also supports using array of images:
`js
new ThreeSixty(document.getElementById('threesixty'), {
image: [
'images/example-1.jpeg',
'images/example-2.jpeg',
'images/example-3.jpeg',
...
],

...
})
`
In this case options count and perRow are ignored.

$3

Single frame rotation:
`js
threesixty.next();
threesixty.prev();
`

Focus n-th frame:
`js
threesixty.goto(index);

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

Image rotation:
`js
// Start rotation
threesixty.play();

// Rotate in oposite direction
threesixty.play(true);

// Rotate only 2 times, then stop automatically
threesixty.play(false, 2);

// Stop rotation
threesixty.stop();

// Play/Stop rotation
threesixty.toggle();
`

Clean up registered events:
`js
threesixty.destroy();
`

$3

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

$3

Licensed under the MIT license.