Vue pc swipe

A lightweight vue swipe component that making the slides fade work in pc

Version: 1.0.3 Updated: 01/14/2018

By: PLDaily License: MIT

Downloads Last 30 Days: 31

Install

npm i vue-pc-swipe
yarn add vue-pc-swipe

Repository: https://github.com/PLDaily/vue-pc-swipe

CDNs

bundle.run: https://bundle.run/vue-pc-swipe

jsDelivr: https://cdn.jsdelivr.net/npm/vue-pc-swipe

unpkg: https://unpkg.com/vue-pc-swipe

vue-pc-swipe

Build Status npm npm npm npm

Overview

A lightweight vue swipe component that making the slides fade work in pc.

demo

Install

Install vue-pc-swipe

npm install vue-pc-swipe

Import vue-pc-swipe

ES6/commonjs import style is supported.

// ES6
import {Swipe, SwipeItem} from 'vue-pc-swipe';

// commonjs
var Swipe = require("vue-pc-swipe").Swipe;
var SwipeItem = require("vue-pc-swipe").SwipeItem;

Usage

<swipe ref="myPcSwipe" :continuous="true" :auto="5000" :startSlide="3" @change="chageSwipe">
  <swipe-item>
    <div>slide0</div>
  </swipe-item>
  <swipe-item>
    <div>slide1</div>
  </swipe-item>
  <swipe-item>
    <div>slide2</div>
  </swipe-item>
</swipe>

expand

you can use change function add indicators、prev or next button.demo

options

Attributes

Option Description
continuous Boolean(default: true) create an infinite feel with no endpoints
auto Number(default: 5000) speed of prev and next transitions in milliseconds
startSlide Number(defalut: 0) index position Swipe should start at

Events

Option Description
prev() slide to prev
next() slide to next
getPos() returns current slide index position
getNumSlides() returns the total amount of slides
slide(index) slide to set index position
change(index) runs at slide change, index is the current slide index position

LICENSE

MIT@PLDaily

Categories: Vue js