The product spinner that Vue.js was missing.

Sponsors

Become a sponsor

Live Demo

Try it on CodeSandbox!

Installation

npm

npm i vue-product-spinner

yarn

yarn add vue-product-spinner

UMD build

<script src="https://cdn.jsdelivr.net/npm/vue-product-spinner@latest/dist/VueProductSpinner.umd.min.js" type="text/javascript"></script>

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

Buy Me a Beer!

Please help me maintain my projects with a little and simple donation! I need beer to work! 😃

License

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