🎆 Vue Product 360

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

▶️ 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 |

⚙️ Methods

slideToRight()

Slide the carousel to the right. If the loop is complete and if the infinite props is set to true, the carousel slide to the first images.

slideToLeft()

Slide the carousel to the left. If the loop is complete and if the infinite props is set to true, the carousel slide to the last images.

slideTo(position)

Slide the carousel to a specific position