The product spinner that Vue.js was missing.
Try it on CodeSandbox!
Installation
npm
npm i vue-product-spinner
yarn
yarn add vue-product-spinner
UMD build
Usage
VueProductSpinner will allow you to add any component in order to handle the image prefetch time.
You can use it as follows:
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.