@deviznet/vue-product-360 NPM

🎆 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 (available 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
image-class	`String`	optional	`null`	Custom CSS class for the image tag
keep-position	`Boolean`	optional	`true`	When the images prop change, the plugin keep the current position. Otherwise, the carousel slide to the first image

🤖 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
refreshing	When the images prop changed, the carousel is refreshing and reload the images.
refreshed	All images are downloaded