360° Product Image Viewer For Vue.js

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
}

Preview:

360° Product Image Viewer For Vue.js

Changelog:

02/03/2021

  • scrollImage prop added (lets you scroll through images on wheel event)
  • disableZoom prop added (lets you disable zoom functionality on your viewer)

02/01/2021

  • disableZoom prop added to disable zoom func

Download Details:

Author: rajeevgade

Live Demo: https://vue-360.now.sh/

Download Link: https://github.com/rajeevgade/vue-360/archive/master.zip

Official Website: https://github.com/rajeevgade/vue-360

Install & Download:

# NPM
$ npm install vue-360 --save

You Might Be Interested In:

Add Comment