Repository: weilao/vue-swiper
Branch: master
Commit: 73857b2c8567
Files: 9
Total size: 34.2 KB

Directory structure:
gitextract_lm2yilr8/

├── .gitignore
├── LICENSE
├── README.md
├── demo/
│   └── index.html
├── dist/
│   └── vue-swiper.js
├── package.json
├── src/
│   ├── vue-swiper.less
│   └── vue-swiper.vue
└── webpack.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
.idea
node_modules


================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2016 威老

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
[![npm](https://img.shields.io/npm/l/vue-swiper.svg?maxAge=2592000)](https://raw.githubusercontent.com/weilao/vue-swiper/master/LICENSE)
[![npm](https://img.shields.io/npm/v/vue-swiper.svg?maxAge=2592000)](https://www.npmjs.com/package/vue-swiper)
[![GitHub release](https://img.shields.io/github/release/weilao/vue-swiper.svg?maxAge=2592000)](https://github.com/weilao/vue-swiper/releases)
[![GitHub issues](https://img.shields.io/github/issues/weilao/vue-swiper.svg?maxAge=2592000)](https://github.com/weilao/vue-swiper/issues)
[![GitHub stars](https://img.shields.io/github/stars/weilao/vue-swiper.svg?style=social&label=Star&maxAge=2592000)](https://github.com/weilao/vue-swiper) 

[![NPM](https://nodei.co/npm/vue-swiper.png?downloads=true&downloadRank=true)](https://nodei.co/npm/vue-swiper/)

# vue-swiper
Swiper component. Easy to use.

## Examples
[basic demo](http://weilao.github.io/vue-swiper/demo)

## Install
```
npm i vue-swiper -S
```

## Usage

```js
import Vue from 'vue'
import Swiper from 'vue-swiper'

new Vue({
    el: 'body',
    components: {Swiper},
    methods: {
        onSlideChangeStart (currentPage) {
            console.log('onSlideChangeStart', currentPage);
        },
        onSlideChangeEnd (currentPage) {
            console.log('onSlideChangeEnd', currentPage);
        }
    }
});
```

```html
<swiper v-ref:swiper
        direction="horizontal"
        :mousewheel-control="true"
        :performance-mode="false"
        :pagination-visible="true"
        :pagination-clickable="true"
        :loop="true"
        @slide-change-start="onSlideChangeStart"
        @slide-change-end="onSlideChangeEnd">
    <div>Page 1</div>
    <div>Page 2</div>
    <div>Page 3</div>
</swiper>
```

## Api
### Properties
| Name                 | Type      | Default      | Description                                                        |
|----------------------|-----------|--------------|--------------------------------------------------------------------|
| direction            | `String`  | `"vertical"` | Could be 'horizontal' or 'vertical' (for vertical slider).         |
| mousewheel-control   | `Boolean` | `true`       | Set to true to enable navigation through slides using mouse wheel. |
| pagination-visible   | `Boolean` | `false`      | Toggle (hide/true) pagination container visibility when click on Slider's container    |
| pagination-clickable | `Boolean` | `false`      | If true then clicking on pagination button will cause transition to appropriate slide. |
| performace-mode      | `Boolean` | `false`      | Disable advance effect for better performance.                     |
| loop                 | `Boolean` | `false`      | Set to true to enable continuous loop mode                         |
| ==================== | ========= | ============ | =================== |

### Methods
| Method            | Description              |
|-------------------|--------------------------|
| next()            | Go next page.            |
| prev()            | Go previous page.        |
| setPage(`Number`) | Set current page number. |

### Events
| Name                            | Parameters | Description                                                                                                                                                  |
|--------------------|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------|
| slide-change-start | `pageNumber`     | Fire in the beginning of animation to other slide (next or previous).                                                                                        |
| slide-change-end   | `pageNumber`     | Will be fired after animation to other slide (next or previous).                                                                                             |
| slide-revert-start | `pageNumber`     | Fire in the beginning of animation to revert slide (no change).                                                                                              |
| slide-revert-end   | `pageNumber`     | Will be fired after animation to revert slide (no change).                                                                                                   |
| slider-move        | `offset`         | Callback function, will be executed when user touch and move finger over Swiper and move it. Receives swiper instance and 'touchmove' event as an arguments. |
| ================== | ================ | ============================ |


================================================
FILE: demo/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-swiper DEMO</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        [v-cloak] {
            display: none;
        }

        html, body {
            margin: 0;
        }

        h2, h3 {
            text-align: center;
        }

        button {
            background-color: skyblue;
            color: white;
            padding: 0.5rem 1.2rem;
            font-size: 1rem;
            border-radius: 0.3rem;
            transition: all 0.25s ease;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
            outline: none;
            appearance: none;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #fff;
            color: #000;
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
            transform: scale(1.05);
        }

        button:active {
            background-color: #ddd;
            color: #333;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
            transform: scale(1);
        }

        .swiper {
            height: 200px;
            margin-bottom: 80px;
        }

        .swiper-wrap > div {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 48px;
            color: #fff;
        }

        .swiper-wrap > div:nth-child(3n) {
            background-color: skyblue;
        }

        .swiper-wrap > div:nth-child(3n + 1) {
            background-color: yellowgreen;
        }

        .swiper-wrap > div:nth-child(3n + 2) {
            background-color: rosybrown;
        }

        #append_child {
            text-align: center;
            margin-bottom: 80px;
        }

        #swiper_children_size {
            height: 400px;
        }

        #swiper_children_size .slide-1 {
            height: 200px;
        }

        #swiper_children_size .slide-2 {
            height: 150px;
        }

        #swiper_children_size .slide-3 {
            height: 100px;
        }

        #swiper_children_size .slide-4 {
            height: 350px;
        }

        .swiper-nested-inner {
            width: 100%;
            height: 100%;
            margin-bottom: 0;
        }


    </style>
</head>
<body v-cloak>
<h2>vue-swiper demo</h2>
<h3>Vertical</h3>
<swiper id="swiper_vertical"
        :pagination-visible="true"
        @slide-change-start="onSlideChangeStart"
        @slide-change-end="onSlideChangeEnd"
        @slide-revert-start="onSlideRevertStart"
        @slide-revert-end="onSlideRevertEnd"
        @slider-move="onSliderMove">
    <div class="slide-1">↑<br>o<br>↓</div>
    <div v-for="n in [2,3]">Page {{n}}</div>
</swiper>
<h3>Horizontal</h3>
<swiper id="swiper_horizontal"
        :pagination-visible="true"
        direction="horizontal">
    <div v-for="slideText in slides" track-by="$index">{{slideText}}</div>
</swiper>
<h3>Loop Mode / Infinite Loop</h3>
<swiper id="swiper_loop"
        :loop="true"
        :pagination-visible="true"
        direction="horizontal">
    <div v-for="slideText in slides" track-by="$index">{{slideText}}</div>
</swiper>
<h3>Append Child</h3>
<div id="append_child">
    <button @click="appendSlide('New Page!')">Append child to the horizontal slider</button>
</div>
<h3>Different children size</h3>
<swiper id="swiper_children_size">
    <div class="slide-1">↑<br>o<br>↓</div>
    <div v-for="n in [2,3,4]" class="slide-{{n}}">Page {{n}}</div>
</swiper>
<!-- Nested swiper no supported yet-->
<!--<h3>Nested</h3>-->
<!--<swiper id="swiper_nested"-->
<!--direction="horizontal"-->
<!--@slide-change-start="onSlideChangeStart"-->
<!--@slide-change-end="onSlideChangeEnd">-->
<!--<div class="slide-1">-->
<!--<swiper class="swiper-nested-inner"-->
<!--direction="vertical">-->
<!--<div class="slide-1">1-1</div>-->
<!--<div class="slide-2">1-2</div>-->
<!--<div class="slide-3">1-3</div>-->
<!--</swiper>-->
<!--</div>-->
<!--<div class="slide-2">-->
<!--<swiper class="swiper-nested-inner"-->
<!--direction="vertical">-->
<!--<div class="slide-1">2-1</div>-->
<!--<div class="slide-2">2-2</div>-->
<!--<div class="slide-3">2-3</div>-->
<!--</swiper>-->
<!--</div>-->
<!--<div class="slide-3">-->
<!--<swiper class="swiper-nested-inner"-->
<!--direction="vertical">-->
<!--<div class="slide-1">3-1</div>-->
<!--<div class="slide-2">3-2</div>-->
<!--<div class="slide-3">3-3</div>-->
<!--</swiper>-->
<!--</div>-->
<!--</swiper>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<script src="../dist/vue-swiper.js"></script>
<script>
    new Vue({
        el: 'body',
        components: {swiper: VueSwiper},
        data: {
            slides: ['← o →', 'Page 2', 'Page 3']
        },
        methods: {
            onSlideChangeStart: function (currentPage) {
                console.log('onSlideChangeStart', currentPage);
            },
            onSlideChangeEnd: function (currentPage) {
                console.log('onSlideChangeEnd', currentPage);
            },
            onSlideRevertStart: function (currentPage) {
                console.log('onSlideRevertStart', currentPage);
            },
            onSlideRevertEnd: function (currentPage) {
                console.log('onSlideRevertEnd', currentPage);
            },
            onSliderMove: function (offset) {
                console.log('onSliderMove', offset);
            },
            prependSlide: function (slideText) {
                this.slides.unshift(slideText);
            },
            appendSlide: function (slideText) {
                this.slides.push(slideText);
            },
            removeSlide: function () {

            }
        }
    });
</script>
</body>
</html>


================================================
FILE: dist/vue-swiper.js
================================================
/*!
 * vue-swiper v0.5.0
 * Swiper component. Easy to use.
 * https://github.com/weilao/vue-swiper
 * @author weilao
 */
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueSwiper=e():t.VueSwiper=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return t[n].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var i={};return e.m=t,e.c=i,e.p="/",e(0)}([function(t,e,i){var n,s;i(1),n=i(5),s=i(6),t.exports=n||{},t.exports.__esModule&&(t.exports=t.exports["default"]),s&&(("function"==typeof t.exports?t.exports.options||(t.exports.options={}):t.exports).template=s)},function(t,e,i){var n=i(2);"string"==typeof n&&(n=[[t.id,n,""]]);i(4)(n,{});n.locals&&(t.exports=n.locals)},function(t,e,i){e=t.exports=i(3)(),e.push([t.id,".swiper{position:relative;overflow:hidden}.swiper .swiper-wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:100%;-webkit-transition:all 0ms ease;transition:all 0ms ease}.swiper .swiper-wrap>div{overflow:hidden;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%}.swiper.horizontal .swiper-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.swiper.vertical .swiper-wrap{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper .swiper-pagination{position:absolute}.swiper .swiper-pagination .swiper-pagination-bullet{width:8px;height:8px;border-radius:50%;background-color:#000;opacity:.2;-webkit-transition:all .5s ease;transition:all .5s ease}.swiper .swiper-pagination .swiper-pagination-bullet.active{background:#007aff;opacity:1}.swiper.vertical .swiper-pagination{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper.vertical .swiper-pagination .swiper-pagination-bullet{display:block;margin:6px 0}.swiper.horizontal .swiper-pagination{bottom:10px;width:100%;text-align:center}.swiper.horizontal .swiper-pagination .swiper-pagination-bullet{display:inline-block;margin:0 3px}",""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var i=this[e];i[2]?t.push("@media "+i[2]+"{"+i[1]+"}"):t.push(i[1])}return t.join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var n={},s=0;s<this.length;s++){var r=this[s][0];"number"==typeof r&&(n[r]=!0)}for(s=0;s<e.length;s++){var o=e[s];"number"==typeof o[0]&&n[o[0]]||(i&&!o[2]?o[2]=i:i&&(o[2]="("+o[2]+") and ("+i+")"),t.push(o))}},t}},function(t,e,i){function n(t,e){for(var i=0;i<t.length;i++){var n=t[i],s=d[n.id];if(s){s.refs++;for(var r=0;r<s.parts.length;r++)s.parts[r](n.parts[r]);for(;r<n.parts.length;r++)s.parts.push(l(n.parts[r],e))}else{for(var o=[],r=0;r<n.parts.length;r++)o.push(l(n.parts[r],e));d[n.id]={id:n.id,refs:1,parts:o}}}}function s(t){for(var e=[],i={},n=0;n<t.length;n++){var s=t[n],r=s[0],o=s[1],a=s[2],l=s[3],h={css:o,media:a,sourceMap:l};i[r]?i[r].parts.push(h):e.push(i[r]={id:r,parts:[h]})}return e}function r(t,e){var i=f(),n=m[m.length-1];if("top"===t.insertAt)n?n.nextSibling?i.insertBefore(e,n.nextSibling):i.appendChild(e):i.insertBefore(e,i.firstChild),m.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");i.appendChild(e)}}function o(t){t.parentNode.removeChild(t);var e=m.indexOf(t);e>=0&&m.splice(e,1)}function a(t){var e=document.createElement("style");return e.type="text/css",r(t,e),e}function l(t,e){var i,n,s;if(e.singleton){var r=v++;i=g||(g=a(e)),n=h.bind(null,i,r,!1),s=h.bind(null,i,r,!0)}else i=a(e),n=u.bind(null,i),s=function(){o(i)};return n(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;n(t=e)}else s()}}function h(t,e,i,n){var s=i?"":n.css;if(t.styleSheet)t.styleSheet.cssText=w(e,s);else{var r=document.createTextNode(s),o=t.childNodes;o[e]&&t.removeChild(o[e]),o.length?t.insertBefore(r,o[e]):t.appendChild(r)}}function u(t,e){var i=e.css,n=e.media,s=e.sourceMap;if(n&&t.setAttribute("media",n),s&&(i+="\n/*# sourceURL="+s.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}var d={},c=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},p=c(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),f=c(function(){return document.head||document.getElementsByTagName("head")[0]}),g=null,v=0,m=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=p()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var i=s(t);return n(i,e),function(t){for(var r=[],o=0;o<i.length;o++){var a=i[o],l=d[a.id];l.refs--,r.push(l)}if(t){var h=s(t);n(h,e)}for(var o=0;o<r.length;o++){var l=r[o];if(0===l.refs){for(var u=0;u<l.parts.length;u++)l.parts[u]();delete d[l.id]}}}};var w=function(){var t=[];return function(e,i){return t[e]=i,t.filter(Boolean).join("\n")}}()},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i="vertical",n="horizontal";e["default"]={props:{direction:{type:String,"default":i,validator:function(t){return[i,n].indexOf(t)>-1}},mousewheelControl:{type:Boolean,"default":!0},performanceMode:{type:Boolean,"default":!1},paginationVisible:{type:Boolean,"default":!1},paginationClickable:{type:Boolean,"default":!1},loop:{type:Boolean,"default":!1},speed:{type:Number,"default":500}},data:function(){return{currentPage:1,lastPage:1,translateX:0,translateY:0,startTranslate:0,delta:0,dragging:!1,startPos:null,transitioning:!1,slideEls:[],translateOffset:0,transitionDuration:0}},ready:function(){this._onTouchMove=this._onTouchMove.bind(this),this._onTouchEnd=this._onTouchEnd.bind(this),this.slideEls=[].map.call(this.$els.swiperWrap.children,function(t){return t}),this.loop?this.$nextTick(function(){this._createLoop(),this.setPage(this.currentPage,!0)}):this.setPage(this.currentPage)},methods:{next:function(){var t=this.currentPage;t<this.slideEls.length||this.loop?this.setPage(t+1):this._revert()},prev:function(){var t=this.currentPage;t>1||this.loop?this.setPage(t-1):this._revert()},setPage:function(t,e){var i=this;if(this.lastPage=this.currentPage,0===t?this.currentPage=this.slideEls.length:t===this.slideEls.length+1?this.currentPage=1:this.currentPage=t,this.loop)0===this.delta&&this._setTranslate(i._getTranslateOfPage(this.lastPage)),setTimeout(function(){i._setTranslate(i._getTranslateOfPage(t)),e||i._onTransitionStart()},0);else{if(this._setTranslate(this._getTranslateOfPage(t)),e)return;this._onTransitionStart()}},isHorizontal:function(){return this.direction===n},isVertical:function(){return this.direction===i},_onTouchStart:function(t){this.startPos=this._getTouchPos(t),this.delta=0,this.startTranslate=this._getTranslateOfPage(this.currentPage),this.startTime=(new Date).getTime(),this.dragging=!0,this.transitionDuration=0,document.addEventListener("touchmove",this._onTouchMove,!1),document.addEventListener("touchend",this._onTouchEnd,!1),document.addEventListener("mousemove",this._onTouchMove,!1),document.addEventListener("mouseup",this._onTouchEnd,!1)},_onTouchMove:function(t){this.delta=this._getTouchPos(t)-this.startPos,this.performanceMode||(this._setTranslate(this.startTranslate+this.delta),this.$emit("slider-move",this._getTranslate())),(this.isVertical()||this.isHorizontal()&&Math.abs(this.delta)>0)&&t.preventDefault()},_onTouchEnd:function(t){this.dragging=!1,this.transitionDuration=this.speed;var e=(new Date).getTime()-this.startTime<1e3;this.delta<-100||e&&this.delta<-15?this.next():this.delta>100||e&&this.delta>15?this.prev():this._revert(),document.removeEventListener("touchmove",this._onTouchMove),document.removeEventListener("touchend",this._onTouchEnd),document.removeEventListener("mousemove",this._onTouchMove),document.removeEventListener("mouseup",this._onTouchEnd)},_onWheel:function(t){this.mousewheelControl&&(this.transitioning||(t.deltaY>0?this.next():this.prev()),this._isPageChanged()&&t.preventDefault())},_revert:function(){this.setPage(this.currentPage)},_getTouchPos:function(t){var e=this.isHorizontal()?"pageX":"pageY";return t.changedTouches?t.changedTouches[0][e]:t[e]},_onTransitionStart:function(){this.transitioning=!0,this.transitionDuration=this.speed,this._isPageChanged()?this.$emit("slide-change-start",this.currentPage):this.$emit("slide-revert-start",this.currentPage)},_onTransitionEnd:function(){this.transitioning=!1,this.transitionDuration=0,this.delta=0,this._isPageChanged()?this.$emit("slide-change-end",this.currentPage):this.$emit("slide-revert-end",this.currentPage)},_isPageChanged:function(){return this.lastPage!==this.currentPage},_setTranslate:function(t){var e=this.isHorizontal()?"translateX":"translateY";this[e]=t},_getTranslate:function(){var t=this.isHorizontal()?"translateX":"translateY";return this[t]},_getTranslateOfPage:function(t){if(0===t)return 0;var e=this.isHorizontal()?"clientWidth":"clientHeight";return-[].reduce.call(this.slideEls,function(i,n,s){return s>t-2?i:i+n[e]},0)+this.translateOffset},_createLoop:function(){var t=this.isHorizontal()?"clientWidth":"clientHeight",e=this.$els.swiperWrap,i=e.firstElementChild.cloneNode(!0),n=e.lastElementChild.cloneNode(!0);e.insertBefore(n,e.firstElementChild),e.appendChild(i),this.translateOffset=-n[t]}}}},function(t,e){t.exports="<div class=swiper :class=\"[direction, {'dragging': dragging}]\" @touchstart=_onTouchStart @mousedown=_onTouchStart @wheel=_onWheel> <div class=swiper-wrap v-el:swiper-wrap :style=\"{\n            'transform' : 'translate3d(' + translateX + 'px,' + translateY + 'px, 0)',\n            'transition-duration': transitionDuration + 'ms'\n         }\" @transitionend=_onTransitionEnd> <slot></slot> </div> <div class=swiper-pagination v-show=paginationVisible> <span class=swiper-pagination-bullet :class=\"{'active': $index+1===currentPage}\" v-for=\"slide in slideEls\" @click=\"paginationClickable && setPage($index+1)\"></span> </div> </div>"}])});

================================================
FILE: package.json
================================================
{
  "name": "vue-swiper",
  "version": "0.5.0",
  "description": "Swiper component. Easy to use.",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/weilao/vue-swiper.git"
  },
  "author": "weilao",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/weilao/vue-swiper/issues"
  },
  "homepage": "https://github.com/weilao/vue-swiper",
  "main": "dist/vue-swiper.js",
  "scripts": {
    "dev": "NODE_ENV=dev webpack-dev-server --inline --hot --host 0.0.0.0 --config webpack.config.js",
    "build": "webpack"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-runtime": "^6.6.1",
    "css-loader": "^0.23.1",
    "less": "^2.7.0",
    "less-loader": "^2.2.3",
    "vue-hot-reload-api": "^1.3.2",
    "vue-html-loader": "^1.2.2",
    "vue-loader": "^8.3.1",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  }
}


================================================
FILE: src/vue-swiper.less
================================================
.swiper {
  position: relative;
  overflow: hidden;

  .swiper-wrap {
    display: flex;
    width: 100%;
    height: 100%;
    transition: all 0ms ease;

    > div {
      overflow: hidden;
      flex-shrink: 0;
      width: 100%;
      height: 100%;
    }
  }

  &.horizontal .swiper-wrap {
    flex-direction: row;
  }

  &.vertical .swiper-wrap {
    flex-direction: column;
  }

  .swiper-pagination {
    position: absolute;

    .swiper-pagination-bullet {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #000000;
      opacity: .2;
      transition: all .5s ease;
    }

    .swiper-pagination-bullet.active {
      background: #007aff;
      opacity: 1;
    }
  }

  &.vertical .swiper-pagination {
    right: 10px;
    top: 50%;
    transform: translate3d(0, -50%, 0);

    .swiper-pagination-bullet {
      display: block;
      margin: 6px 0;
    }
  }

  &.horizontal .swiper-pagination {
    bottom: 10px;
    width: 100%;
    text-align: center;

    .swiper-pagination-bullet {
      display: inline-block;
      margin: 0 3px;
    }
  }
}


================================================
FILE: src/vue-swiper.vue
================================================
<template>
    <div class="swiper"
         :class="[direction, {'dragging': dragging}]"
         @touchstart="_onTouchStart"
         @mousedown="_onTouchStart"
         @wheel="_onWheel">
        <div class="swiper-wrap"
             v-el:swiper-wrap
             :style="{
                'transform' : 'translate3d(' + translateX + 'px,' + translateY + 'px, 0)',
                'transition-duration': transitionDuration + 'ms'
             }"
             @transitionend="_onTransitionEnd">
            <slot></slot>
        </div>
        <div class="swiper-pagination"
             v-show="paginationVisible">
            <span class="swiper-pagination-bullet"
                  :class="{'active': $index+1===currentPage}"
                  v-for="slide in slideEls"
                  @click="paginationClickable && setPage($index+1)"></span>
        </div>
    </div>
</template>
<style lang="less" src="./vue-swiper.less"></style>
<script type="text/babel">
    const VERTICAL = 'vertical';
    const HORIZONTAL = 'horizontal';

    export default {
        props: {
            direction: {
                type: String,
                default: VERTICAL,
                validator: (value) => [VERTICAL, HORIZONTAL].indexOf(value) > -1
            },
            mousewheelControl: {
                type: Boolean,
                default: true
            },
            performanceMode: {
                type: Boolean,
                default: false
            },
            paginationVisible: {
                type: Boolean,
                default: false
            },
            paginationClickable: {
                type: Boolean,
                default: false
            },
            loop: {
                type: Boolean,
                default: false
            },
            speed: {
                type: Number,
                default: 500
            }
        },
        data() {
            return {
                currentPage: 1,
                lastPage: 1,
                translateX: 0,
                translateY: 0,
                startTranslate: 0,
                delta: 0,
                dragging: false,
                startPos: null,
                transitioning: false,
                slideEls: [],
                translateOffset: 0,
                transitionDuration: 0
            };
        },
        ready() {
            this._onTouchMove = this._onTouchMove.bind(this);
            this._onTouchEnd = this._onTouchEnd.bind(this);
            this.slideEls = [].map.call(this.$els.swiperWrap.children, el => el);
            if (this.loop) {
                this.$nextTick(function () {
                    this._createLoop();
                    this.setPage(this.currentPage, true);
                });
            } else {
                this.setPage(this.currentPage);
            }
        },
        methods: {
            next() {
                var page = this.currentPage;
                if (page < this.slideEls.length || this.loop) {
                    this.setPage(page + 1);
                } else {
                    this._revert();
                }
            },
            prev() {
                var page = this.currentPage;
                if (page > 1 || this.loop) {
                    this.setPage(page - 1);
                } else {
                    this._revert();
                }
            },
            setPage(page, noAnimation) {
                var self = this;
                this.lastPage = this.currentPage;
                if (page === 0) {
                    this.currentPage = this.slideEls.length;
                } else if (page === this.slideEls.length + 1) {
                    this.currentPage = 1;
                } else {
                    this.currentPage = page;
                }

                if (this.loop) {
                    if (this.delta === 0) {
                        this._setTranslate(self._getTranslateOfPage(this.lastPage));
                    }
                    setTimeout(function () {
                        self._setTranslate(self._getTranslateOfPage(page));
                        if (noAnimation) return;
                        self._onTransitionStart();
                    }, 0);
                } else {
                    this._setTranslate(this._getTranslateOfPage(page));
                    if (noAnimation) return;
                    this._onTransitionStart();
                }
            },
            isHorizontal() {
                return this.direction === HORIZONTAL;
            },
            isVertical() {
                return this.direction === VERTICAL;
            },
            _onTouchStart(e) {
                this.startPos = this._getTouchPos(e);
                this.delta = 0;
                this.startTranslate = this._getTranslateOfPage(this.currentPage);
                this.startTime = new Date().getTime();
                this.dragging = true;
                this.transitionDuration = 0;

                document.addEventListener('touchmove', this._onTouchMove, false);
                document.addEventListener('touchend', this._onTouchEnd, false);
                document.addEventListener('mousemove', this._onTouchMove, false);
                document.addEventListener('mouseup', this._onTouchEnd, false);
            },
            _onTouchMove(e) {
                this.delta = this._getTouchPos(e) - this.startPos;

                if (!this.performanceMode) {
                    this._setTranslate(this.startTranslate + this.delta);
                    this.$emit('slider-move', this._getTranslate());
                }

                if (this.isVertical() || this.isHorizontal() && Math.abs(this.delta) > 0) {
                    e.preventDefault();
                }
            },
            _onTouchEnd(e) {
                if (this.delta === 0) {
                    return;
                }
                
                this.dragging = false;
                this.transitionDuration = this.speed;
                var isQuickAction = new Date().getTime() - this.startTime < 1000;
                if (this.delta < -100 || (isQuickAction && this.delta < -15)) {
                    this.next();
                } else if (this.delta > 100 || (isQuickAction && this.delta > 15)) {
                    this.prev();
                } else {
                    this._revert();
                }

                document.removeEventListener('touchmove', this._onTouchMove);
                document.removeEventListener('touchend', this._onTouchEnd);
                document.removeEventListener('mousemove', this._onTouchMove);
                document.removeEventListener('mouseup', this._onTouchEnd);
            },
            _onWheel(e) {
                if (this.mousewheelControl) {
                    // TODO Support apple magic mouse and trackpad.
                    if (!this.transitioning) {
                        if (e.deltaY > 0) {
                            this.next();
                        } else {
                            this.prev();
                        }
                    }
                    if (this._isPageChanged()) e.preventDefault();

                }
            },
            _revert() {
                this.setPage(this.currentPage);
            },
            _getTouchPos(e) {
                var key = this.isHorizontal() ? 'pageX' : 'pageY';
                return e.changedTouches ? e.changedTouches[0][key] : e[key];
            },
            _onTransitionStart() {
                this.transitioning = true;
                this.transitionDuration = this.speed;
                if (this._isPageChanged()) {
                    this.$emit('slide-change-start', this.currentPage);
                } else {
                    this.$emit('slide-revert-start', this.currentPage);
                }
            },
            _onTransitionEnd() {
                this.transitioning = false;
                this.transitionDuration = 0;
                this.delta = 0;
                if (this._isPageChanged()) {
                    this.$emit('slide-change-end', this.currentPage);
                } else {
                    this.$emit('slide-revert-end', this.currentPage);
                }
            },
            _isPageChanged() {
                return this.lastPage !== this.currentPage;
            },
            _setTranslate(value) {
                var translateName = this.isHorizontal() ? 'translateX' : 'translateY';
                this[translateName] = value;
            },
            _getTranslate(){
                var translateName = this.isHorizontal() ? 'translateX' : 'translateY';
                return this[translateName];
            },
            _getTranslateOfPage(page) {
                if (page === 0) return 0;

                var propName = this.isHorizontal() ? 'clientWidth' : 'clientHeight';
                return -[].reduce.call(this.slideEls, function (total, el, i) {
                        return i > page - 2 ? total : total + el[propName];
                    }, 0) + this.translateOffset;
            },
            _createLoop() {
                var propName = this.isHorizontal() ? 'clientWidth' : 'clientHeight';
                var swiperWrapEl = this.$els.swiperWrap;
                var duplicateFirstChild = swiperWrapEl.firstElementChild.cloneNode(true);
                var duplicateLastChild = swiperWrapEl.lastElementChild.cloneNode(true);
                swiperWrapEl.insertBefore(duplicateLastChild, swiperWrapEl.firstElementChild);
                swiperWrapEl.appendChild(duplicateFirstChild);
                this.translateOffset = -duplicateLastChild[propName];
            }
        }
    };
</script>


================================================
FILE: webpack.config.js
================================================
var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var pkg = require('./package.json');
var banner = `${pkg.name} v${pkg.version}\n${pkg.description}\n${pkg.homepage}\n@author ${pkg.author}`;
module.exports = {
    entry: {
        'vue-swiper': path.join(__dirname, 'src/vue-swiper.vue')
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        library: 'VueSwiper',
        libraryTarget: 'umd',
        filename: "[name].js"
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: 'babel', exclude: /node_modules/},
            {test: /\.vue$/, loader: 'vue'},
            {test: /\.less$/, loader: "css?sourceMap!postcss!less?sourceMap"}
        ]
    },
    postcss: [autoprefixer({browsers: ['last 2 versions', 'Android 2.3']})],
    babel: {
        "presets": ["es2015"]
    },
    plugins: []
};

if (process.env.NODE_ENV === 'dev') {
    module.exports.devtool = '#eval-source-map';
} else {
    module.exports.plugins.push(new webpack.optimize.UglifyJsPlugin());
    module.exports.plugins.push(new webpack.BannerPlugin(banner));
}