Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/micheleriva/vue-product-spinner
🚗 A 3D product spinner for Vue.js with no dependencies
https://github.com/micheleriva/vue-product-spinner
3d 3d-spinner design ecommerce es6 hacktoberfest presentation product product-management spinner vue vue-components vue2 vuejs
Last synced: about 5 hours ago
JSON representation
🚗 A 3D product spinner for Vue.js with no dependencies
- Host: GitHub
- URL: https://github.com/micheleriva/vue-product-spinner
- Owner: micheleriva
- License: mit
- Created: 2018-10-16T15:31:24.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T22:35:16.000Z (over 1 year ago)
- Last Synced: 2024-09-15T11:51:45.239Z (18 days ago)
- Topics: 3d, 3d-spinner, design, ecommerce, es6, hacktoberfest, presentation, product, product-management, spinner, vue, vue-components, vue2, vuejs
- Language: Vue
- Homepage: https://micheleriva.github.io/vue-product-spinner/
- Size: 20.1 MB
- Stars: 104
- Watchers: 8
- Forks: 28
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
The product spinner that Vue.js was missing.
Sponsors
Live Demo
Try it on CodeSandbox!
# Installation
**npm**
```sh
npm i vue-product-spinner
```
**yarn**
```sh
yarn add vue-product-spinner
```
**UMD build**
```html
```
# Usage
**VueProductSpinner** will allow you to add any component in order to handle the image prefetch time.
You can use it as follows:
```html
import VueProductSpinner from 'vue-product-spinner'
import PreloadSpinnerComponent from 'some-library'
export default {
components: {
VueProductSpinner
},
data() {
return {
images: [
'img1.jpg',
'img2.jpg',
'img3.jpg'
]
}
}
}
```
# 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!
[](https://beerpay.io/micheleriva/vue-product-spinner)
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](/LICENSE.md) file for details.
