Showcase

Features

Supported

• Sprite image of (n x m) Grid style
• Auto resize
• Various input devices (Keyboard, Mouse, Touch)
• Manual Spin

Browser support

Desktop

• Lastest version of Chrome, Firefox, Safari, EDGE
• IE 9+

Mobile

• Safari (iOS 7+)
• Chrome for android
• Samsung Internet 4+

Getting Started

Installation

npm

In case using npm,

npm install @egjs/view360 --save

script tag

In case using script tag, Download the latest version of view360.js and include using the script tag

<!--script src="/path/to/js/release/3.6.3/dist/SpinViewer/view360.spinviewer.pkgd.min.js"></script-->
<script src="//naver.github.io/egjs-view360/release/3.6.3/dist/SpinViewer/view360.spinviewer.pkgd.min.js"></script>

Download link

Usage

1. Set up your Container Element

Your container element’s dimensions should be defined.

<div id="mySpinViewer"></div>

2. Import Module

ES5

// Or use global namespace
var SpinViewer = eg.view360.SpinViewer;

ES6+

// Use es6 import
import {SpinViewer} from "@egjs/view360";

3. Initialize SpinViewer

// create SpinViewer with option
var spinViewer = new SpinViewer(
  document.getElementById("mySpinViewer"), {
    imageUrl: "/path/to/image/image.jpg", /*required */
    rowCount: 24 /* If count of sprite row/col is lager than 1, this field is required */
  }
);

For more information about API, please visit the link.

Examples

• 
  Basic

Projects

• 
  Naver Shopping
• 
  Naver Smart Store

Don't see your project? Post an issue with built-with-view360 label over on the github page.