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

• [x] Add image preloader
• [ ] Add auto spin
• [ ] Add hooks
• [ ] Solve basic bugs
• [x] Add "mouse move" support
• [x] Add "mouse scroll" support
• [x] Add slider support
• [x] 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.