360° Product Image Viewer For Vue.js

Install & Download:

# NPM
$ npm install vue-360 --save

Description:

A full-featured, touch-enabled, 360° Product Image Viewer for Vue.js applications.

More Features:

Autoplay
Image zoom in/out
Rotate image frame by frame
Fullscreen mode

How to use it:

1. Import the 360° Product Image Viewer.

import VueThreeSixty from 'vue-360'
import 'vue-360/dist/css/style.css'

2. Register the component.

Vue.use(VueThreeSixty)

3. Add the component to the template and define the image path as follows:

<vue-three-sixty 
  :amount=36
  imagePath="https://yourdomain.com/image-folder"
  fileName="image_{index}.jpg"
/>

4. All possible props.

imagePath: {
  type: String,
  require: true,
  default: ''
},
fileName: {
  type: String,
  require: true,
  default: ''
},
spinReverse: {
  type: Boolean,
  require: true,
  default: false,
},
amount: {
  type: Number,
  require: true,
  default: 24,
},
autoplay: {
  type: Boolean,
  require: false,
  default: false
},
loop: {
  type: Number,
  require: false,
  default: 1
},
boxShadow: {
  type: Boolean,
  require: false,
  default: false
},
buttonClass: {
  type: String,
  require: false,
  default: 'light'
},
hotspots: {
  type: Array,
  require: true,
  default: () => []
},
identifier: {
  type: String,
  require: true,
  default: () => uuidv1()
},
paddingIndex: {
  type: Boolean,
  require: false,
  default: false
},
disableZoom: {
  type: Boolean,
  require: false,
  default: false
},
scrollImage: {
  type: Boolean,
  require: false,
  default: false
}