A Simple and Beautiful 360° Product Viewer built on Vue.js, it is a full-featured, touch-enabled, 360° Product Image Viewer for Vue.js applications.
Features
- 360° View
- Zoom
- Pan
- Autoplay (Loops)
- Full Screen Mode
- Spin Direction
- Image Caching
- Mobile Responsive
- Touch Events
Installation
npm install vue-360
Config
import VueThreeSixty from 'vue-360'
import 'vue-360/dist/css/style.css'
Vue.use(VueThreeSixty)
Example
Adding a Header
Icons
- The icons used in the demo are from fontawesome. Add the following in your header to display the icons.
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 |
| boxShadow | Boolean | Apply Box Shadow Background | Optional | false |
| buttonClass | String | Apply Styling to Buttons | Optional (light/dark) | light |
| paddingIndex | Boolean | Apply Leading Zero to Image Index | Optional | false |
Buttons
(In order from left to right)
- Play/Pause
- Zoom In
- Zoom Out
- Pan / 360° Mode
- Move Left
- Move Right
- Reset Position
See live demo and download source code.
Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.
This awesome script developed by rajeevgade. Visit their official repository for more information and follow for future updates.
