Simple 360° Product Viewer built on Vue.js

by Posted on

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.
PreviSimple 360° Product Viewer built on Vue.jsew

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


Published by admin