The product spinner that Vue.js was missing.
Live Demo
Try it on CodeSandbox!
Installation
npm
npm i vue-product-spinneryarn
yarn add vue-product-spinnerUMD 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.
