Vue Three Sixty

• A Simple 360° Product Viewer built on Vue.js

Features

• 360° View
• Zoom
• Pan
• Autoplay (Loops)
• Full Screen Mode
• Spin Direction
• Image Caching
• Mobile Responsive
• Touch Events

Installation

npm install vue-three-sixty

Config

import VueThreeSixty from 'vue-three-sixty'

Vue.use(VueThreeSixty)

Example

<vue-three-sixty 
  :amount=36
  image-path="https://scaleflex.cloudimg.io/width/600/q35/https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36"
  filemame="chair_{index}.jpg?v1"
/>

Adding a Header

<template v-slot:header>
  36 Images - Autoplay (1 loop) - Reverse Spin
</template>

Props

| Name | Type | Description | Required | Default Value | | --- | --- | --- | --- | --- | | amount | Number | Number of images | Yes | | imagePath | String | Path to your image | Yes | | fileName | String | File name format | Yes | | spinReverse | Boolean | Reverse Spin | Optional | false | | autoplay | Number | Autoplay your images | Optional | 24 | | loop | Number | Number of loops you want to autoplay | Optional | 1 | | Optional | false | | paddingIndex | Boolean | Apply Leading Zero to Image Index | Optional | false | | startAtZero | Boolean | Set tru if your fist images start at 0 | Optional | false | | disableZoom | Boolean | Disable Zoom Functionality | Optional | false | | scrollImage | Boolean | Scroll Images instead of Default Zoom | Optional | false | | btnBgColor | String | Buttons Background color | Optional | #F1F1F2 | | btnColor | String | Buttons Background color | Optional | #666666 | | btnRounded | Number | Buttons rounded borders | Optional | 0 | | btnSize | Number | Buttons size | Optional | 28 |

Buttons

(In order from left to right)

• Play/Pause
• Zoom In
• Zoom Out
• Move Left
• Move Right
• Reset Position
• Fullscreen

Credits

• Customized by Calidae.com
• Original code in https://github.com/rajeevgade/vue-360