Nine Pomeranian Monsters
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

vue-siema

0.3.16 • Public • Published

WIP !!!

Watch progress on liveedu.tv: 📺🎥 Click 🍿

vue-siema - Lightweight and simple carousel for Vue
This project is based on https://github.com/pawelgrzybek/siema

⚠️️Warning: vue-siema uses internal v-html be sure to sanitize only use on trusted content!(will change later)

🚀🚀🚀Example: https://cannap.github.io/vue-siema/

Install

npm install --save vue-siema

Props

Prop Type Default Required
duration Number 200 false
slides Array empty true
easing String 'ease-out' false
perPage Number 1 false
startIndex Number 0 false
draggable Boolean true false
threshold Number 20 false
loop Boolean true false

Events

Name Fires returns
@slideChange Init / Slide changed currentIndex

Usage

<template>
    <div class="slider">
        <Siema :slides="slides">
        </Siema>
    </div>
</template>
   <script>
   import Siema from 'vue-siema'
   export default {
     name: 'hello',
     data() {
       return {
         sliderIndex: 2,
         slides: [ //⚠️️ Warning: vue-siema uses internal v-html be sure to sanitize!
           '<img src="https://unsplash.it/600/350?image=10" alt="slide">',
           '<img src="https://unsplash.it/600/350?image=12" alt="slide">',
           '<img src="https://unsplash.it/600/350?image=13" alt="slide">',
           '<img src="https://unsplash.it/600/350?image=14" alt="slide">',
           '<img src="https://unsplash.it/600/350?image=15" alt="slide">',
           '<img src="https://unsplash.it/600/350?image=16" alt="slide">',
         ]
       }
     },
     components: {
       Siema,
     }
   }
   </script>

Todo:

  • Touch Stuff
  • Dynamically adding/remove Slides
  • Events
  • SSR compatibility (check)
  • Pagination(example)
  • Manual initialize via ref and disable in options when some async content comes and must wait

install

npm i vue-siema

Downloadsweekly downloads

23

version

0.3.16

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability