Skip to content

micheleriva/vue-product-spinner

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 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!

Beerpay

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.