Press "Enter" to skip to content

A Simple And Beautiful 360° Product Viewer Built on Vue.js

Vue 360 is a full-featured, touch-enabled, 360-degree product image viewer for Vue.js applications.

vue image viewer, best 360 image viewer, vue product 360, react 360 image viewer, 360 image view javascript, vue 360 image viewer

Features

  • 360-degree view
  • Zoom
  • Deprivation
  • Autoplay (loops)
  • Full-screen mode
  • Rotation direction
  • Caching image
  • Mobile responsive
  • Touch Events

Buttons

(In order from left to right)

  • Play/Pause
  • Zoom In
  • Zoom Out
  • Pan / 360° Mode
  • Move Left
  • Move Right
  • Reset Position

Roadmap

  • Hotspots
  • Lazyloading
  • Custom CSS Classes
  • Custom Buttons
  • And a few more …

jQuery SpriteSpin Animation Plugin | Product Image Viewer

How to make use of it:

Install and download:

# NPM
$ npm install vue-360 --save

1. Import the 360-degree 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 specify 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
}

Props

NameTypeDescriptionRequiredDefault Value
amountNumberNumber of imagesYes 
imagePathStringPath to your imageYes 
fileNameStringFile name formatYes 
spinReverseBooleanReverse SpinOptionalfalse
autoplayNumberAutoplay your imagesOptional24
loopNumberNumber of loops you want to autoplayOptional1
boxShadowBooleanApply Box Shadow BackgroundOptionalfalse
buttonClassStringApply Styling to ButtonsOptional (light/dark)light
paddingIndexBooleanApply Leading Zero to Image IndexOptionalfalse
disableZoomBooleanDisable Zoom FunctionalityOptionalfalse
scrollImageBooleanScroll Images instead of Default ZoomOptionalfalse

360° Product Image Viewer, vue-360 Plugin/Github


See Demo And Download

Official Website(rajeevgade): Click Here

This superior jQuery/javascript plugin is developed by rajeevgade. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.