360-Degree Image Viewer with Pure JavaScript – circlr

Preview:

Description:

circlr.js is a lightweight JavaScript library which allows you to create a 360-degree panoramic view from a series of images.

circlr.js allows the visitor to rotate the product images with scroll, mouse and touch events and works on all touch devices without any other touch library support.

Installation:

# NPM
$ npm install circlr --save

Basic usage:

Download and include the latest version of circlr.js library at the end of your document.

<script src="circlr.min.js"></script>

Prepare your product images with different angles and insert them into the document as follow.

<div id="circlr">
  <img data-src="images/00.jpg">
  <img data-src="images/01.jpg">
  <img data-src="images/02.jpg">
  <img data-src="images/03.jpg">
  <img data-src="images/04.jpg">
  <img data-src="images/05.jpg">
  <img data-src="images/06.jpg">
  <img data-src="images/07.jpg">
  <img data-src="images/08.jpg">
  <img data-src="images/09.jpg">
  <img data-src="images/10.jpg">
  <img data-src="images/11.jpg">
  <img data-src="images/12.jpg">
  <img data-src="images/13.jpg">
  <img data-src="images/14.jpg">
  <img data-src="images/15.jpg">
  <div id="loader"></div>
</div>

Initialize the image viewer.

const el = document.querySelector('#circlr');
circlr(el)
  .scroll(true)
  .play()
  .on('show', n => {
  });

API methods.

// Return object DOM node
crl(el)
// Rotation via scroll flag.
crl.scroll(n)
// Vertical orientation flag.
crl.vertical(n)
// Reverse rotation flag.
crl.reverse(n)
// Cyclic rotation flag, default true.
crl.cycle(n)
// Start frame, default 0.
crl.start(n)
// Playback interval, default 75 ms.
crl.interval(ms)
//Frame number for playback to him or infinity playback if number in not specified.
crl.play([n])
// Stop playback
crl.stop()
// Hide object DOM node
crl.hide()
// Show specified frame.
crl.show(n)
// Show previous frame.
crl.prev()
// Show next frame.
crl.next()
// Unbind rotation events.
crl.unbind()

Changelog:

v3.1.1 (06/25/2017)

• Add unbind listeners method