• Stars
    star
    104
  • Rank 330,604 (Top 7 %)
  • Language Vue
  • License
    MIT License
  • Created about 6 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿš— A 3D product spinner for Vue.js with no dependencies

The product spinner that Vue.js was missing.

Build Status VueProductSpinner weekly downloads MIT License

Sponsors

Live Demo




Try it on CodeSandbox!

Edit Vue Product Spinner Demo

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

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

Beerpay

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.

More Repositories

1

krabs

๐Ÿฆ€ Express.js/Fastify middleware and virtual host for multi-tenant Next.js applications
TypeScript
362
star
2

gauguin

๐ŸŽจ High performances Golang server for generating social share images dynamically (beta).
Go
115
star
3

mjn

โšก๏ธLike loadash.get, but in ~200 bytes
TypeScript
69
star
4

the-quotes-database

The repository containing the code for the "Fulltext search with ElasticSearch and Node on Docker" article
JavaScript
45
star
5

Salvini-Blocker

Simple Chrome extension that replaces Matteo Salvini's face with a cat.
JavaScript
35
star
6

CadregaLisp

๐ŸŽ Just another useless programming language, but with inganno.
Haskell
35
star
7

editorjs-go

Fast markdown/HTML generator for Editor.js
Go
33
star
8

coronablocker

๐Ÿฆ  Chrome extension to block any news about Covid-19 on social networks.
JavaScript
32
star
9

Emotion-Detection-ML-Example

๐Ÿค“ Simple Emotion Detection Neural Network made with brain.js for an article on Hackdoor
JavaScript
31
star
10

personal-website

My personal website, statically generated by Next.js
JavaScript
28
star
11

gosearch

In-memory, full-text search engine built in Go. For no particular reason.
Go
28
star
12

std

My personal TypeScript and JavaScript standard library
TypeScript
27
star
13

Aquarium

A minimalistic blockchain implementation
TypeScript
26
star
14

node-server-clustering

A simple Koa clustering example.
JavaScript
16
star
15

multitenant-nextjs

a test repository for testing Next.js' multi-tenant capabilities with a custom Express.js server
JavaScript
14
star
16

DNN-Pose-Estimator

๐ŸŽฉ Simple pose estimator made in Go Lang using Deep Neural Networks
Go
10
star
17

face-detection

๐Ÿ‘ค Node.js face detection library based on OpenCv
JavaScript
10
star
18

PrimeBot

๐Ÿฆ A Twitter Bot which tweets a prime number per day
Elixir
8
star
19

HackerRank-my-solutions

๐ŸฟMy solutions to HackerRank problems
Haskell
8
star
20

aika

โ›ˆ In-memory key-value multithreaded database
Haskell
7
star
21

unomi-node

๐Ÿ‘ค Apache Unomi SDK for Node.js
TypeScript
5
star
22

micheleriva

4
star
23

shoulditrust

๐Ÿค”Check if an IP address is safe or not!
JavaScript
3
star
24

shell-snippets

๐Ÿš Little collection of shell scripts and aliases
Shell
3
star
25

caesar-cipher

๐Ÿ‘‘ Dead Simple Caesar Cipher written in Haskell
Haskell
3
star
26

omnixent-experimental

Experimental Omnixent implementation using Erlang and OTP
Erlang
3
star
27

omgossh

๐Ÿ˜ฑ Connect and execute remote SSH commands
Go
3
star
28

quotient

A massively scalable, fast, distributed quotient filter.
Go
3
star
29

H99

99 Haskell Problems (solved)!
Haskell
3
star
30

managing-authentication-in-nextjs-workshop

JavaScript
3
star
31

proposal-array-parallelMap-parallelFilter

HTML
2
star
32

ocaml-assembly-example

๐Ÿ‘พJust an Assembly Hello World program compiled from OCaml ocamlopt.
Assembly
2
star
33

WordSearchGame

๐Ÿ”  Word Search Game written in Haskell
Haskell
2
star
34

kek

๐Ÿ—ฃA supercazzola generator highly inspired by Polygen
JavaScript
2
star
35

range-prototype

Extend your JavaScript Number type with a ~100 bytes polyfill
JavaScript
2
star
36

NeuroPong

๐Ÿ“ Single player pong game controlled by the user's brain!
JavaScript
2
star
37

saferec

Easy and lightweight trampoline for your recursive functions.
JavaScript
2
star
38

ElixirIdenticon

๐Ÿ’ A simple Elixir program which generates Identicons.
Elixir
2
star
39

realworldnextjs.com

TypeScript
2
star
40

c-vs-ts-wasm

๐Ÿ‘ฝSimple repo I made for myself just to test some WebAssembly compilers.
WebAssembly
1
star
41

dat-theme

๐Ÿ”ฅ "Day After Tomorrow" Theme for Sublime Text 3
1
star
42

treesum

Blazing fast library for computing MD5 checksum of large filesystems
Go
1
star
43

high-performance-nextjs-workshop

JavaScript
1
star
44

go-brainfuck

๐Ÿ’ฅA Brainfuck compiler written in GoLang
Go
1
star
45

winnie

๐Ÿ’ƒ C++ human detection program using webcam and OpenCV.
C++
1
star
46

introducing-elixir-exercises

๐Ÿ’ง Introducing Elixir Exercises
Elixir
1
star
47

cvTracker

C++
1
star
48

micheleriva-talks-code

TypeScript
1
star
49

real-world-haskell-exercises

๐Ÿ”ญ Real World Haskell Exercises
Haskell
1
star