Package Exports

@deviznet/vue-product-360

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@deviznet/vue-product-360) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🎆 Vue Product 360

Loop a series of images in a 360 rotatation carousel with this plugin for Vue.js

Demo Screenshot

▶️ Try the demo or ▶️ Start a sandbox (soon)

Installation

Quick start guide for installing and configuring the plugin

# Using npm
npm install @deviznet/vue-product-360

# Using yarn
yarn add @deviznet/vue-product-360

Usage

<template>
  <VueProduct360 :images="images">
    <p>Loading</p>
  </VueProduct360>
</template>

<script>
  import VueProduct360 from 'vue-product-360'

  export default {
    data() {
      return {
        images: ['img1.png', 'img2.png', 'img3.png'],
      },
    },
    components: {
      VueProduct360,
    },
  };
</script>

Props

Name	Type	Is Required	Default Value	Description
images	`Array[String]`	required	`[]`	Array of images to be looped
speed	`Number`	optional	`10`	Rotation speed
infinite	`Boolean`	optional	`true`	Infinite loop
reverse	`Boolean`	optional	`false`	Change the rotation direction
disabled	`Boolean`	optional	`false`	Disabled the rotation

Events

Name	Description
loading	Images are currently downloading
loaded	All images are downloaded
starting	The rotation started with the following events: mousedown or touchstart
stopping	The rotation is stopped