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


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 威老
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![npm](https://img.shields.io/npm/l/vue-swiper.svg?maxAge=2592000)](https://raw.githubusercontent.com/weilao/vue-swiper/master/LICENSE)
 2 | [![npm](https://img.shields.io/npm/v/vue-swiper.svg?maxAge=2592000)](https://www.npmjs.com/package/vue-swiper)
 3 | [![GitHub release](https://img.shields.io/github/release/weilao/vue-swiper.svg?maxAge=2592000)](https://github.com/weilao/vue-swiper/releases)
 4 | [![GitHub issues](https://img.shields.io/github/issues/weilao/vue-swiper.svg?maxAge=2592000)](https://github.com/weilao/vue-swiper/issues)
 5 | [![GitHub stars](https://img.shields.io/github/stars/weilao/vue-swiper.svg?style=social&label=Star&maxAge=2592000)](https://github.com/weilao/vue-swiper) 
 6 | 
 7 | [![NPM](https://nodei.co/npm/vue-swiper.png?downloads=true&downloadRank=true)](https://nodei.co/npm/vue-swiper/)
 8 | 
 9 | # vue-swiper
10 | Swiper component. Easy to use.
11 | 
12 | ## Examples
13 | [basic demo](http://weilao.github.io/vue-swiper/demo)
14 | 
15 | ## Install
16 | ```
17 | npm i vue-swiper -S
18 | ```
19 | 
20 | ## Usage
21 | 
22 | ```js
23 | import Vue from 'vue'
24 | import Swiper from 'vue-swiper'
25 | 
26 | new Vue({
27 |     el: 'body',
28 |     components: {Swiper},
29 |     methods: {
30 |         onSlideChangeStart (currentPage) {
31 |             console.log('onSlideChangeStart', currentPage);
32 |         },
33 |         onSlideChangeEnd (currentPage) {
34 |             console.log('onSlideChangeEnd', currentPage);
35 |         }
36 |     }
37 | });
38 | ```
39 | 
40 | ```html
41 | <swiper v-ref:swiper
42 |         direction="horizontal"
43 |         :mousewheel-control="true"
44 |         :performance-mode="false"
45 |         :pagination-visible="true"
46 |         :pagination-clickable="true"
47 |         :loop="true"
48 |         @slide-change-start="onSlideChangeStart"
49 |         @slide-change-end="onSlideChangeEnd">
50 |     <div>Page 1</div>
51 |     <div>Page 2</div>
52 |     <div>Page 3</div>
53 | </swiper>
54 | ```
55 | 
56 | ## Api
57 | ### Properties
58 | | Name                 | Type      | Default      | Description                                                        |
59 | |----------------------|-----------|--------------|--------------------------------------------------------------------|
60 | | direction            | `String`  | `"vertical"` | Could be 'horizontal' or 'vertical' (for vertical slider).         |
61 | | mousewheel-control   | `Boolean` | `true`       | Set to true to enable navigation through slides using mouse wheel. |
62 | | pagination-visible   | `Boolean` | `false`      | Toggle (hide/true) pagination container visibility when click on Slider's container    |
63 | | pagination-clickable | `Boolean` | `false`      | If true then clicking on pagination button will cause transition to appropriate slide. |
64 | | performace-mode      | `Boolean` | `false`      | Disable advance effect for better performance.                     |
65 | | loop                 | `Boolean` | `false`      | Set to true to enable continuous loop mode                         |
66 | | ==================== | ========= | ============ | =================== |
67 | 
68 | ### Methods
69 | | Method            | Description              |
70 | |-------------------|--------------------------|
71 | | next()            | Go next page.            |
72 | | prev()            | Go previous page.        |
73 | | setPage(`Number`) | Set current page number. |
74 | 
75 | ### Events
76 | | Name                            | Parameters | Description                                                                                                                                                  |
77 | |--------------------|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------|
78 | | slide-change-start | `pageNumber`     | Fire in the beginning of animation to other slide (next or previous).                                                                                        |
79 | | slide-change-end   | `pageNumber`     | Will be fired after animation to other slide (next or previous).                                                                                             |
80 | | slide-revert-start | `pageNumber`     | Fire in the beginning of animation to revert slide (no change).                                                                                              |
81 | | slide-revert-end   | `pageNumber`     | Will be fired after animation to revert slide (no change).                                                                                                   |
82 | | 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. |
83 | | ================== | ================ | ============================ |
84 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>vue-swiper DEMO</title>
  6 |     <meta name="viewport"
  7 |           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8 |     <style>
  9 |         [v-cloak] {
 10 |             display: none;
 11 |         }
 12 | 
 13 |         html, body {
 14 |             margin: 0;
 15 |         }
 16 | 
 17 |         h2, h3 {
 18 |             text-align: center;
 19 |         }
 20 | 
 21 |         button {
 22 |             background-color: skyblue;
 23 |             color: white;
 24 |             padding: 0.5rem 1.2rem;
 25 |             font-size: 1rem;
 26 |             border-radius: 0.3rem;
 27 |             transition: all 0.25s ease;
 28 |             box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
 29 |             outline: none;
 30 |             appearance: none;
 31 |             border: none;
 32 |             cursor: pointer;
 33 |         }
 34 | 
 35 |         button:hover {
 36 |             background-color: #fff;
 37 |             color: #000;
 38 |             box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
 39 |             transform: scale(1.05);
 40 |         }
 41 | 
 42 |         button:active {
 43 |             background-color: #ddd;
 44 |             color: #333;
 45 |             box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
 46 |             transform: scale(1);
 47 |         }
 48 | 
 49 |         .swiper {
 50 |             height: 200px;
 51 |             margin-bottom: 80px;
 52 |         }
 53 | 
 54 |         .swiper-wrap > div {
 55 |             display: flex;
 56 |             justify-content: center;
 57 |             align-items: center;
 58 |             text-align: center;
 59 |             font-size: 48px;
 60 |             color: #fff;
 61 |         }
 62 | 
 63 |         .swiper-wrap > div:nth-child(3n) {
 64 |             background-color: skyblue;
 65 |         }
 66 | 
 67 |         .swiper-wrap > div:nth-child(3n + 1) {
 68 |             background-color: yellowgreen;
 69 |         }
 70 | 
 71 |         .swiper-wrap > div:nth-child(3n + 2) {
 72 |             background-color: rosybrown;
 73 |         }
 74 | 
 75 |         #append_child {
 76 |             text-align: center;
 77 |             margin-bottom: 80px;
 78 |         }
 79 | 
 80 |         #swiper_children_size {
 81 |             height: 400px;
 82 |         }
 83 | 
 84 |         #swiper_children_size .slide-1 {
 85 |             height: 200px;
 86 |         }
 87 | 
 88 |         #swiper_children_size .slide-2 {
 89 |             height: 150px;
 90 |         }
 91 | 
 92 |         #swiper_children_size .slide-3 {
 93 |             height: 100px;
 94 |         }
 95 | 
 96 |         #swiper_children_size .slide-4 {
 97 |             height: 350px;
 98 |         }
 99 | 
100 |         .swiper-nested-inner {
101 |             width: 100%;
102 |             height: 100%;
103 |             margin-bottom: 0;
104 |         }
105 | 
106 | 
107 |     </style>
108 | </head>
109 | <body v-cloak>
110 | <h2>vue-swiper demo</h2>
111 | <h3>Vertical</h3>
112 | <swiper id="swiper_vertical"
113 |         :pagination-visible="true"
114 |         @slide-change-start="onSlideChangeStart"
115 |         @slide-change-end="onSlideChangeEnd"
116 |         @slide-revert-start="onSlideRevertStart"
117 |         @slide-revert-end="onSlideRevertEnd"
118 |         @slider-move="onSliderMove">
119 |     <div class="slide-1">↑<br>o<br>↓</div>
120 |     <div v-for="n in [2,3]">Page {{n}}</div>
121 | </swiper>
122 | <h3>Horizontal</h3>
123 | <swiper id="swiper_horizontal"
124 |         :pagination-visible="true"
125 |         direction="horizontal">
126 |     <div v-for="slideText in slides" track-by="$index">{{slideText}}</div>
127 | </swiper>
128 | <h3>Loop Mode / Infinite Loop</h3>
129 | <swiper id="swiper_loop"
130 |         :loop="true"
131 |         :pagination-visible="true"
132 |         direction="horizontal">
133 |     <div v-for="slideText in slides" track-by="$index">{{slideText}}</div>
134 | </swiper>
135 | <h3>Append Child</h3>
136 | <div id="append_child">
137 |     <button @click="appendSlide('New Page!')">Append child to the horizontal slider</button>
138 | </div>
139 | <h3>Different children size</h3>
140 | <swiper id="swiper_children_size">
141 |     <div class="slide-1">↑<br>o<br>↓</div>
142 |     <div v-for="n in [2,3,4]" class="slide-{{n}}">Page {{n}}</div>
143 | </swiper>
144 | <!-- Nested swiper no supported yet-->
145 | <!--<h3>Nested</h3>-->
146 | <!--<swiper id="swiper_nested"-->
147 | <!--direction="horizontal"-->
148 | <!--@slide-change-start="onSlideChangeStart"-->
149 | <!--@slide-change-end="onSlideChangeEnd">-->
150 | <!--<div class="slide-1">-->
151 | <!--<swiper class="swiper-nested-inner"-->
152 | <!--direction="vertical">-->
153 | <!--<div class="slide-1">1-1</div>-->
154 | <!--<div class="slide-2">1-2</div>-->
155 | <!--<div class="slide-3">1-3</div>-->
156 | <!--</swiper>-->
157 | <!--</div>-->
158 | <!--<div class="slide-2">-->
159 | <!--<swiper class="swiper-nested-inner"-->
160 | <!--direction="vertical">-->
161 | <!--<div class="slide-1">2-1</div>-->
162 | <!--<div class="slide-2">2-2</div>-->
163 | <!--<div class="slide-3">2-3</div>-->
164 | <!--</swiper>-->
165 | <!--</div>-->
166 | <!--<div class="slide-3">-->
167 | <!--<swiper class="swiper-nested-inner"-->
168 | <!--direction="vertical">-->
169 | <!--<div class="slide-1">3-1</div>-->
170 | <!--<div class="slide-2">3-2</div>-->
171 | <!--<div class="slide-3">3-3</div>-->
172 | <!--</swiper>-->
173 | <!--</div>-->
174 | <!--</swiper>-->
175 | <script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
176 | <script src="../dist/vue-swiper.js"></script>
177 | <script>
178 |     new Vue({
179 |         el: 'body',
180 |         components: {swiper: VueSwiper},
181 |         data: {
182 |             slides: ['← o →', 'Page 2', 'Page 3']
183 |         },
184 |         methods: {
185 |             onSlideChangeStart: function (currentPage) {
186 |                 console.log('onSlideChangeStart', currentPage);
187 |             },
188 |             onSlideChangeEnd: function (currentPage) {
189 |                 console.log('onSlideChangeEnd', currentPage);
190 |             },
191 |             onSlideRevertStart: function (currentPage) {
192 |                 console.log('onSlideRevertStart', currentPage);
193 |             },
194 |             onSlideRevertEnd: function (currentPage) {
195 |                 console.log('onSlideRevertEnd', currentPage);
196 |             },
197 |             onSliderMove: function (offset) {
198 |                 console.log('onSliderMove', offset);
199 |             },
200 |             prependSlide: function (slideText) {
201 |                 this.slides.unshift(slideText);
202 |             },
203 |             appendSlide: function (slideText) {
204 |                 this.slides.push(slideText);
205 |             },
206 |             removeSlide: function () {
207 | 
208 |             }
209 |         }
210 |     });
211 | </script>
212 | </body>
213 | </html>
214 | 


--------------------------------------------------------------------------------
/dist/vue-swiper.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * vue-swiper v0.5.0
3 |  * Swiper component. Easy to use.
4 |  * https://github.com/weilao/vue-swiper
5 |  * @author weilao
6 |  */
7 | !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>"}])});


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-swiper",
 3 |   "version": "0.5.0",
 4 |   "description": "Swiper component. Easy to use.",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/weilao/vue-swiper.git"
 8 |   },
 9 |   "author": "weilao",
10 |   "license": "MIT",
11 |   "bugs": {
12 |     "url": "https://github.com/weilao/vue-swiper/issues"
13 |   },
14 |   "homepage": "https://github.com/weilao/vue-swiper",
15 |   "main": "dist/vue-swiper.js",
16 |   "scripts": {
17 |     "dev": "NODE_ENV=dev webpack-dev-server --inline --hot --host 0.0.0.0 --config webpack.config.js",
18 |     "build": "webpack"
19 |   },
20 |   "devDependencies": {
21 |     "autoprefixer": "^6.3.6",
22 |     "babel-core": "^6.8.0",
23 |     "babel-loader": "^6.2.4",
24 |     "babel-plugin-transform-runtime": "^6.8.0",
25 |     "babel-preset-es2015": "^6.6.0",
26 |     "babel-runtime": "^6.6.1",
27 |     "css-loader": "^0.23.1",
28 |     "less": "^2.7.0",
29 |     "less-loader": "^2.2.3",
30 |     "vue-hot-reload-api": "^1.3.2",
31 |     "vue-html-loader": "^1.2.2",
32 |     "vue-loader": "^8.3.1",
33 |     "vue-style-loader": "^1.0.0",
34 |     "webpack": "^1.13.0",
35 |     "webpack-dev-server": "^1.14.1"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/vue-swiper.less:
--------------------------------------------------------------------------------
 1 | .swiper {
 2 |   position: relative;
 3 |   overflow: hidden;
 4 | 
 5 |   .swiper-wrap {
 6 |     display: flex;
 7 |     width: 100%;
 8 |     height: 100%;
 9 |     transition: all 0ms ease;
10 | 
11 |     > div {
12 |       overflow: hidden;
13 |       flex-shrink: 0;
14 |       width: 100%;
15 |       height: 100%;
16 |     }
17 |   }
18 | 
19 |   &.horizontal .swiper-wrap {
20 |     flex-direction: row;
21 |   }
22 | 
23 |   &.vertical .swiper-wrap {
24 |     flex-direction: column;
25 |   }
26 | 
27 |   .swiper-pagination {
28 |     position: absolute;
29 | 
30 |     .swiper-pagination-bullet {
31 |       width: 8px;
32 |       height: 8px;
33 |       border-radius: 50%;
34 |       background-color: #000000;
35 |       opacity: .2;
36 |       transition: all .5s ease;
37 |     }
38 | 
39 |     .swiper-pagination-bullet.active {
40 |       background: #007aff;
41 |       opacity: 1;
42 |     }
43 |   }
44 | 
45 |   &.vertical .swiper-pagination {
46 |     right: 10px;
47 |     top: 50%;
48 |     transform: translate3d(0, -50%, 0);
49 | 
50 |     .swiper-pagination-bullet {
51 |       display: block;
52 |       margin: 6px 0;
53 |     }
54 |   }
55 | 
56 |   &.horizontal .swiper-pagination {
57 |     bottom: 10px;
58 |     width: 100%;
59 |     text-align: center;
60 | 
61 |     .swiper-pagination-bullet {
62 |       display: inline-block;
63 |       margin: 0 3px;
64 |     }
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/src/vue-swiper.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="swiper"
  3 |          :class="[direction, {'dragging': dragging}]"
  4 |          @touchstart="_onTouchStart"
  5 |          @mousedown="_onTouchStart"
  6 |          @wheel="_onWheel">
  7 |         <div class="swiper-wrap"
  8 |              v-el:swiper-wrap
  9 |              :style="{
 10 |                 'transform' : 'translate3d(' + translateX + 'px,' + translateY + 'px, 0)',
 11 |                 'transition-duration': transitionDuration + 'ms'
 12 |              }"
 13 |              @transitionend="_onTransitionEnd">
 14 |             <slot></slot>
 15 |         </div>
 16 |         <div class="swiper-pagination"
 17 |              v-show="paginationVisible">
 18 |             <span class="swiper-pagination-bullet"
 19 |                   :class="{'active': $index+1===currentPage}"
 20 |                   v-for="slide in slideEls"
 21 |                   @click="paginationClickable && setPage($index+1)"></span>
 22 |         </div>
 23 |     </div>
 24 | </template>
 25 | <style lang="less" src="./vue-swiper.less"></style>
 26 | <script type="text/babel">
 27 |     const VERTICAL = 'vertical';
 28 |     const HORIZONTAL = 'horizontal';
 29 | 
 30 |     export default {
 31 |         props: {
 32 |             direction: {
 33 |                 type: String,
 34 |                 default: VERTICAL,
 35 |                 validator: (value) => [VERTICAL, HORIZONTAL].indexOf(value) > -1
 36 |             },
 37 |             mousewheelControl: {
 38 |                 type: Boolean,
 39 |                 default: true
 40 |             },
 41 |             performanceMode: {
 42 |                 type: Boolean,
 43 |                 default: false
 44 |             },
 45 |             paginationVisible: {
 46 |                 type: Boolean,
 47 |                 default: false
 48 |             },
 49 |             paginationClickable: {
 50 |                 type: Boolean,
 51 |                 default: false
 52 |             },
 53 |             loop: {
 54 |                 type: Boolean,
 55 |                 default: false
 56 |             },
 57 |             speed: {
 58 |                 type: Number,
 59 |                 default: 500
 60 |             }
 61 |         },
 62 |         data() {
 63 |             return {
 64 |                 currentPage: 1,
 65 |                 lastPage: 1,
 66 |                 translateX: 0,
 67 |                 translateY: 0,
 68 |                 startTranslate: 0,
 69 |                 delta: 0,
 70 |                 dragging: false,
 71 |                 startPos: null,
 72 |                 transitioning: false,
 73 |                 slideEls: [],
 74 |                 translateOffset: 0,
 75 |                 transitionDuration: 0
 76 |             };
 77 |         },
 78 |         ready() {
 79 |             this._onTouchMove = this._onTouchMove.bind(this);
 80 |             this._onTouchEnd = this._onTouchEnd.bind(this);
 81 |             this.slideEls = [].map.call(this.$els.swiperWrap.children, el => el);
 82 |             if (this.loop) {
 83 |                 this.$nextTick(function () {
 84 |                     this._createLoop();
 85 |                     this.setPage(this.currentPage, true);
 86 |                 });
 87 |             } else {
 88 |                 this.setPage(this.currentPage);
 89 |             }
 90 |         },
 91 |         methods: {
 92 |             next() {
 93 |                 var page = this.currentPage;
 94 |                 if (page < this.slideEls.length || this.loop) {
 95 |                     this.setPage(page + 1);
 96 |                 } else {
 97 |                     this._revert();
 98 |                 }
 99 |             },
100 |             prev() {
101 |                 var page = this.currentPage;
102 |                 if (page > 1 || this.loop) {
103 |                     this.setPage(page - 1);
104 |                 } else {
105 |                     this._revert();
106 |                 }
107 |             },
108 |             setPage(page, noAnimation) {
109 |                 var self = this;
110 |                 this.lastPage = this.currentPage;
111 |                 if (page === 0) {
112 |                     this.currentPage = this.slideEls.length;
113 |                 } else if (page === this.slideEls.length + 1) {
114 |                     this.currentPage = 1;
115 |                 } else {
116 |                     this.currentPage = page;
117 |                 }
118 | 
119 |                 if (this.loop) {
120 |                     if (this.delta === 0) {
121 |                         this._setTranslate(self._getTranslateOfPage(this.lastPage));
122 |                     }
123 |                     setTimeout(function () {
124 |                         self._setTranslate(self._getTranslateOfPage(page));
125 |                         if (noAnimation) return;
126 |                         self._onTransitionStart();
127 |                     }, 0);
128 |                 } else {
129 |                     this._setTranslate(this._getTranslateOfPage(page));
130 |                     if (noAnimation) return;
131 |                     this._onTransitionStart();
132 |                 }
133 |             },
134 |             isHorizontal() {
135 |                 return this.direction === HORIZONTAL;
136 |             },
137 |             isVertical() {
138 |                 return this.direction === VERTICAL;
139 |             },
140 |             _onTouchStart(e) {
141 |                 this.startPos = this._getTouchPos(e);
142 |                 this.delta = 0;
143 |                 this.startTranslate = this._getTranslateOfPage(this.currentPage);
144 |                 this.startTime = new Date().getTime();
145 |                 this.dragging = true;
146 |                 this.transitionDuration = 0;
147 | 
148 |                 document.addEventListener('touchmove', this._onTouchMove, false);
149 |                 document.addEventListener('touchend', this._onTouchEnd, false);
150 |                 document.addEventListener('mousemove', this._onTouchMove, false);
151 |                 document.addEventListener('mouseup', this._onTouchEnd, false);
152 |             },
153 |             _onTouchMove(e) {
154 |                 this.delta = this._getTouchPos(e) - this.startPos;
155 | 
156 |                 if (!this.performanceMode) {
157 |                     this._setTranslate(this.startTranslate + this.delta);
158 |                     this.$emit('slider-move', this._getTranslate());
159 |                 }
160 | 
161 |                 if (this.isVertical() || this.isHorizontal() && Math.abs(this.delta) > 0) {
162 |                     e.preventDefault();
163 |                 }
164 |             },
165 |             _onTouchEnd(e) {
166 |                 if (this.delta === 0) {
167 |                     return;
168 |                 }
169 |                 
170 |                 this.dragging = false;
171 |                 this.transitionDuration = this.speed;
172 |                 var isQuickAction = new Date().getTime() - this.startTime < 1000;
173 |                 if (this.delta < -100 || (isQuickAction && this.delta < -15)) {
174 |                     this.next();
175 |                 } else if (this.delta > 100 || (isQuickAction && this.delta > 15)) {
176 |                     this.prev();
177 |                 } else {
178 |                     this._revert();
179 |                 }
180 | 
181 |                 document.removeEventListener('touchmove', this._onTouchMove);
182 |                 document.removeEventListener('touchend', this._onTouchEnd);
183 |                 document.removeEventListener('mousemove', this._onTouchMove);
184 |                 document.removeEventListener('mouseup', this._onTouchEnd);
185 |             },
186 |             _onWheel(e) {
187 |                 if (this.mousewheelControl) {
188 |                     // TODO Support apple magic mouse and trackpad.
189 |                     if (!this.transitioning) {
190 |                         if (e.deltaY > 0) {
191 |                             this.next();
192 |                         } else {
193 |                             this.prev();
194 |                         }
195 |                     }
196 |                     if (this._isPageChanged()) e.preventDefault();
197 | 
198 |                 }
199 |             },
200 |             _revert() {
201 |                 this.setPage(this.currentPage);
202 |             },
203 |             _getTouchPos(e) {
204 |                 var key = this.isHorizontal() ? 'pageX' : 'pageY';
205 |                 return e.changedTouches ? e.changedTouches[0][key] : e[key];
206 |             },
207 |             _onTransitionStart() {
208 |                 this.transitioning = true;
209 |                 this.transitionDuration = this.speed;
210 |                 if (this._isPageChanged()) {
211 |                     this.$emit('slide-change-start', this.currentPage);
212 |                 } else {
213 |                     this.$emit('slide-revert-start', this.currentPage);
214 |                 }
215 |             },
216 |             _onTransitionEnd() {
217 |                 this.transitioning = false;
218 |                 this.transitionDuration = 0;
219 |                 this.delta = 0;
220 |                 if (this._isPageChanged()) {
221 |                     this.$emit('slide-change-end', this.currentPage);
222 |                 } else {
223 |                     this.$emit('slide-revert-end', this.currentPage);
224 |                 }
225 |             },
226 |             _isPageChanged() {
227 |                 return this.lastPage !== this.currentPage;
228 |             },
229 |             _setTranslate(value) {
230 |                 var translateName = this.isHorizontal() ? 'translateX' : 'translateY';
231 |                 this[translateName] = value;
232 |             },
233 |             _getTranslate(){
234 |                 var translateName = this.isHorizontal() ? 'translateX' : 'translateY';
235 |                 return this[translateName];
236 |             },
237 |             _getTranslateOfPage(page) {
238 |                 if (page === 0) return 0;
239 | 
240 |                 var propName = this.isHorizontal() ? 'clientWidth' : 'clientHeight';
241 |                 return -[].reduce.call(this.slideEls, function (total, el, i) {
242 |                         return i > page - 2 ? total : total + el[propName];
243 |                     }, 0) + this.translateOffset;
244 |             },
245 |             _createLoop() {
246 |                 var propName = this.isHorizontal() ? 'clientWidth' : 'clientHeight';
247 |                 var swiperWrapEl = this.$els.swiperWrap;
248 |                 var duplicateFirstChild = swiperWrapEl.firstElementChild.cloneNode(true);
249 |                 var duplicateLastChild = swiperWrapEl.lastElementChild.cloneNode(true);
250 |                 swiperWrapEl.insertBefore(duplicateLastChild, swiperWrapEl.firstElementChild);
251 |                 swiperWrapEl.appendChild(duplicateFirstChild);
252 |                 this.translateOffset = -duplicateLastChild[propName];
253 |             }
254 |         }
255 |     };
256 | </script>
257 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | var autoprefixer = require('autoprefixer');
 4 | var pkg = require('./package.json');
 5 | var banner = `${pkg.name} v${pkg.version}\n${pkg.description}\n${pkg.homepage}\n@author ${pkg.author}`;
 6 | module.exports = {
 7 |     entry: {
 8 |         'vue-swiper': path.join(__dirname, 'src/vue-swiper.vue')
 9 |     },
10 |     output: {
11 |         path: path.join(__dirname, 'dist'),
12 |         publicPath: '/',
13 |         library: 'VueSwiper',
14 |         libraryTarget: 'umd',
15 |         filename: "[name].js"
16 |     },
17 |     module: {
18 |         loaders: [
19 |             {test: /\.js$/, loader: 'babel', exclude: /node_modules/},
20 |             {test: /\.vue$/, loader: 'vue'},
21 |             {test: /\.less$/, loader: "css?sourceMap!postcss!less?sourceMap"}
22 |         ]
23 |     },
24 |     postcss: [autoprefixer({browsers: ['last 2 versions', 'Android 2.3']})],
25 |     babel: {
26 |         "presets": ["es2015"]
27 |     },
28 |     plugins: []
29 | };
30 | 
31 | if (process.env.NODE_ENV === 'dev') {
32 |     module.exports.devtool = '#eval-source-map';
33 | } else {
34 |     module.exports.plugins.push(new webpack.optimize.UglifyJsPlugin());
35 |     module.exports.plugins.push(new webpack.BannerPlugin(banner));
36 | }
37 | 


--------------------------------------------------------------------------------