Skip to content

prefonty/vue3-product-spinner

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

The product spinner that Vue.js was missing.

Build Status VueProductSpinner weekly downloads MIT License

Sponsors

Live Demo




Try it on CodeSandbox!

Edit Vue Product Spinner Demo

Installation

npm

npm i vue3-product-spinner

Usage

VueProductSpinner will allow you to add any component in order to handle the image prefetch time.
You can use it as follows:

<template>
  <VueProductSpinner 
    :imgs="imgs" 
    :slider="true"
  >
    <PreloadSpinnerComponent />
  </VueProductSpinner>
</template>

<script>
  import VueProductSpinner from 'vue-product-spinner'
  import PreloadSpinnerComponent from 'some-library'

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

props

Prop Name Type Is Required Default Value Description
images string[] required [] An array of images to be displayed
infinite Boolean optional true Infinite loop
speed Number optional 3 Rotation speed
touchDrag Boolean optional true Handle touch events
mouseWheel Boolean optional true Handle mouse wheel events
mouseDrag Boolean optional true Handle mouse drag events
slider Boolean optional false Show slider input
sliderClass String optional Custom slider CSS class

Roadmap

  • Add image preloader
  • Add auto spin
  • Add hooks
  • Solve basic bugs
  • Add "mouse move" support
  • Add "mouse scroll" support
  • Add slider support
  • Add touchscreen support

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

About

๐Ÿš— A 3D product spinner for Vue 3 with no dependencies

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 62.4%
  • JavaScript 32.2%
  • HTML 4.5%
  • Shell 0.9%