3D Product Spinner For Vue.js

3D Product Spinner For Vue.js

A 3D product spinner with no dependencies built for Vue.js.

The product spinner that Vue.js was missing.

Build Status VueProductSpinner weekly downloads MIT License

Live Demo

Try it on CodeSandbox!

Edit Vue Product Spinner Demo



npm i vue-product-spinner


yarn add vue-product-spinner

UMD build

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/VueProductSpinner.umd.min.js" type="text/javascript"></script>


VueProductSpinner will allow you to add any component in order to handle the image prefetch time.
You can use it as follows:

    <PreloadSpinnerComponent />

  import VueProductSpinner from 'vue-product-spinner'
  import PreloadSpinnerComponent from 'some-library'

  export default {
    components: {
    data() {
      return {
        images: [


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


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

Github Repository

Tags: #VueJs