Skip to content

Latest commit

 

History

History
109 lines (85 loc) · 2.83 KB

README.md

File metadata and controls

109 lines (85 loc) · 2.83 KB
Raw

vue-360

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

Click here for React Version

Demo

Preview

Demo | Documentation

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

<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"
/>

Adding a Header

<template v-slot:header>
  <div class="v360-header text-light bg-dark">
      <span class="v360-header-title">36 Images - Autoplay (1 loop) - Reverse Spin</span>
      <span class="v360-header-description"></span>
  </div>
</template>

Icons

  • The icons used in the demo are from fontawesome. Add the following in your header to display the icons.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css">

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
stopLoopAtIndex Number Number of images you want to autoplay in the last loop Optional 1
boxShadow Boolean Apply Box Shadow Background Optional false
buttonClass String Apply Styling to Buttons Optional (light/dark) light
hideAllButtons Boolean Hides all Buttons Optional false
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
draggingDirection String Set's the dragging direction to horizontal or vertical Optional horizontal

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 ...

Credits