vue-pc-swipe

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