npm install vue-360
import VueThreeSixty from 'vue-360'
import 'vue-360/dist/css/style.css'
Vue.use(VueThreeSixty)
<vue-three-sixty
:amount=36
imagePath="https://scaleflex.cloudimg.io/width/600/q35/https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36"
fileName="chair_{index}.jpg?v1"
/>
<template v-slot:header>
<div class="v360-header text-light bg-dark">
<
<
</div>
</template>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css">
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 |
disableZoom | Boolean | Disable Zoom Functionality | Optional | false |
scrollImage | Boolean | Scroll Images instead of Default Zoom | Optional | false |
(In order from left to right)
Author: rajeevgade
Demo: https://vue-360.now.sh/
Source Code: https://github.com/rajeevgade/vue-360
#vue #vuejs #javascript