diff --git a/README.md b/README.md
index 2386124..1b3a056 100644
--- a/README.md
+++ b/README.md
@@ -37,8 +37,8 @@ Vue.component('swipe-item', SwipeItem);
### Import using script tag
``` html
-
-
+
+
```
``` js
@@ -106,6 +106,9 @@ Work on a Vue instance:
| prevent | Boolean | `preventDefault` when touch start, useful for some lower version Android Browser (4.2, etc) | false |
| propagation | Boolean | solve nesting | false |
| disabled | Boolean | disabled user swipe item | false |
+| showNumber | Boolean | Show the number of index on slider | false |
+| zoom | Boolean | Full screen display of slider pictures | false |
+
### Events
diff --git a/dist/vue-swipe.css b/dist/vue-swipe.css
index a28b08a..64c439a 100644
--- a/dist/vue-swipe.css
+++ b/dist/vue-swipe.css
@@ -1 +1 @@
-.mint-swipe,.mint-swipe-items-wrap{overflow:hidden;position:relative;height:100%}.mint-swipe-items-wrap{-webkit-transform:translateZ(0);transform:translateZ(0)}.mint-swipe-items-wrap>div{position:absolute;-webkit-transform:translateX(-100%);transform:translateX(-100%);width:100%;height:100%;display:none}.mint-swipe-items-wrap>div.is-active{display:block;-webkit-transform:none;transform:none}.mint-swipe-indicators{position:absolute;bottom:10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mint-swipe-indicator{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2;margin:0 3px}.mint-swipe-indicator.is-active{background:#fff}
\ No newline at end of file
+.mint-swipe{color:#fff;text-align:center}.mint-swipe,.mint-swipe-items-wrap{overflow:hidden;position:relative;height:100%}.mint-swipe-items-wrap{-webkit-transform:translateZ(0);transform:translateZ(0)}.mint-swipe-items-wrap>div{position:absolute;-webkit-transform:translateX(-100%);transform:translateX(-100%);width:100%;height:100%;display:none}.mint-swipe-items-wrap>div.is-active{display:block;-webkit-transform:none;transform:none}.mint-swipe-indicators{position:absolute;bottom:10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mint-swipe-indicator{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2;margin:0 3px}.mint-swipe-indicator.is-active{background:#fff}.mint-swipe-numbers{position:absolute;top:0;right:0;background:rgba(0,0,0,.5);color:#fff}.mint-swipe.is-zoom{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background:#000}.mint-swipe.is-zoom .mint-swipe-zoom{position:absolute;top:0;left:0;z-index:98;width:100%;height:100%;background-color:transparent}.mint-swipe.is-zoom .mint-swipe-numbers{top:auto;bottom:20px;right:auto;left:50%;transform:translateX(-50%);background-color:transparent}.mint-swipe.is-zoom .mint-swipe-item{background:transparent}.mint-swipe.is-zoom .mint-swipe-item img{position:absolute;top:50%;left:0;width:100%;height:auto;transform:translateY(-50%)}
\ No newline at end of file
diff --git a/dist/vue-swipe.js b/dist/vue-swipe.js
index e8261d5..467e649 100644
--- a/dist/vue-swipe.js
+++ b/dist/vue-swipe.js
@@ -1 +1 @@
-module.exports=function(t){var e={};function n(i){if(e[i])return e[i].exports;var a=e[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:i})},n.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=9)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"mt-swipe-item",mounted:function(){this.$parent&&this.$parent.swipeItemCreated(this)},destroyed:function(){this.$parent&&this.$parent.swipeItemDestroyed(this)}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(7),a=n(6);e.default={name:"mt-swipe",created:function(){this.dragState={}},data:function(){return{ready:!1,dragging:!1,userScrolling:!1,animating:!1,index:0,pages:[],timer:null,reInitTimer:null,noDrag:!1}},props:{speed:{type:Number,default:300},defaultIndex:{type:Number,default:0},disabled:{type:Boolean,default:!1},auto:{type:Number,default:3e3},continuous:{type:Boolean,default:!0},showIndicators:{type:Boolean,default:!0},noDragWhenSingle:{type:Boolean,default:!0},prevent:{type:Boolean,default:!1},propagation:{type:Boolean,default:!1}},methods:{swipeItemCreated:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},swipeItemDestroyed:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},translate:function(t,e,n,a){var s=this,r=arguments;if(n){this.animating=!0,t.style.webkitTransition="-webkit-transform "+n+"ms ease-in-out",setTimeout(function(){t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},50);var o=!1,l=function(){o||(o=!0,s.animating=!1,t.style.webkitTransition="",t.style.webkitTransform="",a&&a.apply(s,r))};(0,i.once)(t,"webkitTransitionEnd",l),setTimeout(l,n+100)}else t.style.webkitTransition="",t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},reInitPages:function(){var t=this,e=this.$children;this.noDrag=1===e.length&&this.noDragWhenSingle;var n=[];this.index=this.defaultIndex,e.forEach(function(e,i){n.push(e.$el),(0,a.removeClass)(e.$el,"is-active"),i===t.defaultIndex&&(0,a.addClass)(e.$el,"is-active")}),this.pages=n},doAnimate:function(t,e){var n=this;if(0!==this.$children.length&&(e||!(this.$children.length<2))){var i,s,r,o,l,u,d=this.speed||300,c=this.index,h=this.pages,f=h.length;e&&"goto"!==t?(i=e.prevPage,r=e.currentPage,s=e.nextPage,o=e.pageWidth,l=e.offsetLeft):(e=e||{},o=this.$el.clientWidth,r=h[c],"goto"===t?(i=e.prevPage,s=e.nextPage):(i=h[c-1],s=h[c+1]),this.continuous&&h.length>1&&(i||(i=h[h.length-1]),s||(s=h[0])),i&&(i.style.display="block",this.translate(i,-o)),s&&(s.style.display="block",this.translate(s,o)));var p=this.$children[c].$el;"prev"===t?(c>0&&(u=c-1),this.continuous&&0===c&&(u=f-1)):"next"===t?(c-1&&e.newIndex0&&n.translate(i,-1*o,d),s&&l<0&&n.translate(s,o,d)):(i&&n.translate(i,-1*o,d),s&&n.translate(s,o,d)))},10)}},next:function(){this.doAnimate("next")},prev:function(){this.doAnimate("prev")},goto:function(t){this.index!==t&&(t1&&(a||(a=this.$children[this.$children.length-1]),r||(r=this.$children[0])),n.prevPage=a?a.$el:null,n.dragPage=s?s.$el:null,n.nextPage=r?r.$el:null,n.prevPage&&(n.prevPage.style.display="block"),n.nextPage&&(n.nextPage.style.display="block")}},doOnTouchMove:function(t){if(!this.noDrag&&!this.disabled){var e=this.dragState,n=t.changedTouches?t.changedTouches[0]:t;e.currentLeft=n.pageX,e.currentTop=n.pageY,e.currentTopAbsolute=n.clientY;var i=e.currentLeft-e.startLeft,a=e.currentTopAbsolute-e.startTopAbsolute,s=Math.abs(i),r=Math.abs(a);if(s<5||s>=5&&r>=1.73*s)this.userScrolling=!0;else{this.userScrolling=!1,t.preventDefault();var o=(i=Math.min(Math.max(1-e.pageWidth,i),e.pageWidth-1))<0?"next":"prev";if(e.prevPage&&"prev"===o)this.translate(e.prevPage,i-e.pageWidth);else if(e.nextPage&&"next"===o)this.translate(e.nextPage,i+e.pageWidth);else{var l=e.pageWidth,u=i;i=-1/6/l*u*(Math.abs(u)-2*l)}this.translate(e.dragPage,i)}}},doOnTouchEnd:function(){if(!this.noDrag&&!this.disabled){var t=this.dragState,e=new Date-t.startTime,n=null,i=t.currentLeft-t.startLeft,a=t.currentTop-t.startTop,s=t.pageWidth,r=this.index,o=this.pages.length;if(e<300){var l=Math.abs(i)<5&&Math.abs(a)<5;(isNaN(i)||isNaN(a))&&(l=!0),l&&this.$children[this.index].$emit("tap")}e<300&&void 0===t.currentLeft||((e<300||Math.abs(i)>s/2)&&(n=i<0?"next":"prev"),this.continuous||(0===r&&"prev"===n||r===o-1&&"next"===n)&&(n=null),this.$children.length<2&&(n=null),this.doAnimate(n,{offsetLeft:i,pageWidth:t.pageWidth,prevPage:t.prevPage,currentPage:t.dragPage,nextPage:t.nextPage}),this.dragState={})}},dragStartEvent:function(t){this.prevent&&t.preventDefault(),this.propagation&&t.stopPropagation(),this.animating||(this.dragging=!0,this.userScrolling=!1,this.doOnTouchStart(t))},dragMoveEvent:function(t){this.dragging&&this.doOnTouchMove(t)},dragEndEvent:function(t){if(this.userScrolling)return this.dragging=!1,void(this.dragState={});this.dragging&&(this.doOnTouchEnd(t),this.dragging=!1)}},destroyed:function(){this.timer&&(clearInterval(this.timer),this.timer=null),this.reInitTimer&&(clearTimeout(this.reInitTimer),this.reInitTimer=null)},mounted:function(){var t=this;this.ready=!0,this.auto>0&&(this.timer=setInterval(function(){t.dragging||t.animating||t.next()},this.auto)),this.reInitPages();var e=this.$el;e.addEventListener("touchstart",this.dragStartEvent),e.addEventListener("touchmove",this.dragMoveEvent),e.addEventListener("touchend",this.dragEndEvent),e.addEventListener("mousedown",this.dragStartEvent),e.addEventListener("mousemove",this.dragMoveEvent),e.addEventListener("mouseup",this.dragEndEvent)}}},function(t,e,n){"use strict";function i(t,e,n,i,a,s,r,o){var l=typeof(t=t||{}).default;"object"!==l&&"function"!==l||(t=t.default);var u,d="function"==typeof t?t.options:t;if(e&&(d.render=e,d.staticRenderFns=n,d._compiled=!0),i&&(d.functional=!0),s&&(d._scopeId=s),r?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),a&&a.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},d._ssrRegister=u):a&&(u=o?function(){a.call(this,this.$root.$options.shadowRoot)}:a),u)if(d.functional){d._injectStyles=u;var c=d.render;d.render=function(t,e){return u.call(e),c(t,e)}}else{var h=d.beforeCreate;d.beforeCreate=h?[].concat(h,u):[u]}return{exports:t,options:d}}n.d(e,"a",function(){return i})},function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return a});var i=function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"mint-swipe-item"},[this._t("default")],2)},a=[]},function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return a});var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"mint-swipe"},[n("div",{ref:"wrap",staticClass:"mint-swipe-items-wrap"},[t._t("default")],2),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.showIndicators,expression:"showIndicators"}],staticClass:"mint-swipe-indicators"},t._l(t.pages,function(e,i){return n("div",{key:i,staticClass:"mint-swipe-indicator",class:{"is-active":i===t.index}})}))])},a=[]},function(t,e,n){"use strict";n.r(e);var i=n(0),a=n.n(i);for(var s in i)"default"!==s&&function(t){n.d(e,t,function(){return i[t]})}(s);var r=n(3),o=n(2),l=Object(o.a)(a.a,r.a,r.b,!1,null,null,null);e.default=l.exports},function(t,e,n){"use strict";var i=function(t,e){if(!t||!e)return!1;if(-1!=e.indexOf(" "))throw new Error("className should not contain space.");return t.classList?t.classList.contains(e):(" "+t.className+" ").indexOf(" "+e+" ")>-1};t.exports={hasClass:i,addClass:function(t,e){if(t){for(var n=t.className,a=(e||"").split(" "),s=0,r=a.length;s0?this.timer=setInterval(function(){n.dragging||n.animating||n.next()},t):clearInterval(this.timer)}},methods:{swipeItemCreated:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},swipeItemDestroyed:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},translate:function(t,e,n,a){var s=this,r=arguments;if(n){this.animating=!0,t.style.webkitTransition="-webkit-transform "+n+"ms ease-in-out",setTimeout(function(){t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},50);var o=!1,u=function(){o||(o=!0,s.animating=!1,t.style.webkitTransition="",t.style.webkitTransform="",a&&a.apply(s,r))};(0,i.once)(t,"webkitTransitionEnd",u),setTimeout(u,n+100)}else t.style.webkitTransition="",t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},reInitPages:function(){var t=this,e=this.$children;this.noDrag=1===e.length&&this.noDragWhenSingle;var n=[];this.index=this.defaultIndex,e.forEach(function(e,i){n.push(e.$el),(0,a.removeClass)(e.$el,"is-active"),i===t.defaultIndex&&(0,a.addClass)(e.$el,"is-active")}),this.pages=n},doAnimate:function(t,e){var n=this;if(0!==this.$children.length&&(e||!(this.$children.length<2))){var i,s,r,o,u,l,d=this.speed||300,c=this.index,h=this.pages,f=h.length;e&&"goto"!==t?(i=e.prevPage,r=e.currentPage,s=e.nextPage,o=e.pageWidth,u=e.offsetLeft):(e=e||{},o=this.$el.clientWidth,r=h[c],"goto"===t?(i=e.prevPage,s=e.nextPage):(i=h[c-1],s=h[c+1]),this.continuous&&h.length>1&&(i||(i=h[h.length-1]),s||(s=h[0])),i&&(i.style.display="block",this.translate(i,-o)),s&&(s.style.display="block",this.translate(s,o)));var p=this.$children[c].$el;"prev"===t?(c>0&&(l=c-1),this.continuous&&0===c&&(l=f-1)):"next"===t?(c-1&&e.newIndex0&&n.translate(i,-1*o,d),s&&u<0&&n.translate(s,o,d)):(i&&n.translate(i,-1*o,d),s&&n.translate(s,o,d)))},10)}},next:function(){this.doAnimate("next")},prev:function(){this.doAnimate("prev")},goto:function(t){this.index!==t&&(t1&&(a||(a=this.$children[this.$children.length-1]),r||(r=this.$children[0])),n.prevPage=a?a.$el:null,n.dragPage=s?s.$el:null,n.nextPage=r?r.$el:null,n.prevPage&&(n.prevPage.style.display="block"),n.nextPage&&(n.nextPage.style.display="block")}},doOnTouchMove:function(t){if(!this.noDrag&&!this.disabled){var e=this.dragState,n=t.changedTouches?t.changedTouches[0]:t;e.currentLeft=n.pageX,e.currentTop=n.pageY,e.currentTopAbsolute=n.clientY;var i=e.currentLeft-e.startLeft,a=e.currentTopAbsolute-e.startTopAbsolute,s=Math.abs(i),r=Math.abs(a);if(s<5||s>=5&&r>=1.73*s)this.userScrolling=!0;else{this.userScrolling=!1,t.preventDefault();var o=(i=Math.min(Math.max(1-e.pageWidth,i),e.pageWidth-1))<0?"next":"prev";if(e.prevPage&&"prev"===o)this.translate(e.prevPage,i-e.pageWidth);else if(e.nextPage&&"next"===o)this.translate(e.nextPage,i+e.pageWidth);else{var u=e.pageWidth,l=i;i=-1/6/u*l*(Math.abs(l)-2*u)}this.translate(e.dragPage,i)}}},doOnTouchEnd:function(){if(!this.noDrag&&!this.disabled){var t=this.dragState,e=new Date-t.startTime,n=null,i=t.currentLeft-t.startLeft,a=t.currentTop-t.startTop,s=t.pageWidth,r=this.index,o=this.pages.length;if(e<300){var u=Math.abs(i)<5&&Math.abs(a)<5;(isNaN(i)||isNaN(a))&&(u=!0),u&&this.$children[this.index].$emit("tap")}e<300&&void 0===t.currentLeft||((e<300||Math.abs(i)>s/2)&&(n=i<0?"next":"prev"),this.continuous||(0===r&&"prev"===n||r===o-1&&"next"===n)&&(n=null),this.$children.length<2&&(n=null),this.doAnimate(n,{offsetLeft:i,pageWidth:t.pageWidth,prevPage:t.prevPage,currentPage:t.dragPage,nextPage:t.nextPage}),this.dragState={})}},dragStartEvent:function(t){this.prevent&&t.preventDefault(),this.propagation&&t.stopPropagation(),this.animating||(this.dragging=!0,this.userScrolling=!1,this.doOnTouchStart(t))},dragMoveEvent:function(t){this.dragging&&this.doOnTouchMove(t)},dragEndEvent:function(t){if(this.userScrolling)return this.dragging=!1,void(this.dragState={});this.dragging&&(this.doOnTouchEnd(t),this.dragging=!1)},zoomInEvent:function(t){this.zoomState=!0,clearInterval(this.timer),t.stopPropagation(),t.preventDefault()},zoomOutEvent:function(t){var e=this;this.zoomState=!1,this.auto>0&&(this.timer=setInterval(function(){e.dragging||e.animating||e.next()},this.auto)),t.stopPropagation(),t.preventDefault()}},destroyed:function(){this.timer&&(clearInterval(this.timer),this.timer=null),this.reInitTimer&&(clearTimeout(this.reInitTimer),this.reInitTimer=null)},mounted:function(){var t=this;this.ready=!0,this.auto>0&&(this.timer=setInterval(function(){t.dragging||t.animating||t.next()},this.auto)),this.reInitPages();var e=this.$el;this.zoom&&e.addEventListener("click",this.zoomInEvent),e.addEventListener("touchstart",this.dragStartEvent),e.addEventListener("touchmove",this.dragMoveEvent),e.addEventListener("touchend",this.dragEndEvent),e.addEventListener("mousedown",this.dragStartEvent),e.addEventListener("mousemove",this.dragMoveEvent),e.addEventListener("mouseup",this.dragEndEvent)}}},function(t,e,n){"use strict";function i(t,e,n,i,a,s,r,o){var u=typeof(t=t||{}).default;"object"!==u&&"function"!==u||(t=t.default);var l,d="function"==typeof t?t.options:t;if(e&&(d.render=e,d.staticRenderFns=n,d._compiled=!0),i&&(d.functional=!0),s&&(d._scopeId=s),r?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),a&&a.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},d._ssrRegister=l):a&&(l=o?function(){a.call(this,this.$root.$options.shadowRoot)}:a),l)if(d.functional){d._injectStyles=l;var c=d.render;d.render=function(t,e){return l.call(e),c(t,e)}}else{var h=d.beforeCreate;d.beforeCreate=h?[].concat(h,l):[l]}return{exports:t,options:d}}n.d(e,"a",function(){return i})},function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return a});var i=function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"mint-swipe-item"},[this._t("default")],2)},a=[]},function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return a});var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"mint-swipe",class:{"is-zoom":t.zoomState}},[n("div",{ref:"wrap",staticClass:"mint-swipe-items-wrap"},[t._t("default")],2),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.showIndicators,expression:"showIndicators"}],staticClass:"mint-swipe-indicators"},t._l(t.pages,function(e,i){return n("div",{key:i,staticClass:"mint-swipe-indicator",class:{"is-active":i===t.index}})})),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.showNumber,expression:"showNumber"}],staticClass:"mint-swipe-numbers"},[t._v("\n "+t._s(t.index+1+"/"+t.pages.length)+"\n ")]),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.zoom,expression:"zoom"}],staticClass:"mint-swipe-zoom",on:{click:function(e){t.zoomOutEvent(e)}}})])},a=[]},function(t,e,n){"use strict";n.r(e);var i=n(0),a=n.n(i);for(var s in i)"default"!==s&&function(t){n.d(e,t,function(){return i[t]})}(s);var r=n(3),o=n(2),u=Object(o.a)(a.a,r.a,r.b,!1,null,null,null);e.default=u.exports},function(t,e,n){"use strict";var i=function(t,e){if(!t||!e)return!1;if(-1!=e.indexOf(" "))throw new Error("className should not contain space.");return t.classList?t.classList.contains(e):(" "+t.className+" ").indexOf(" "+e+" ")>-1};t.exports={hasClass:i,addClass:function(t,e){if(t){for(var n=t.className,a=(e||"").split(" "),s=0,r=a.length;s
+ Image Full Screen
+
+ 
+ 
+ 
+
+
+
+
Change swipe
Slide1
diff --git a/example/scriptTag.html b/example/scriptTag.html
new file mode 100644
index 0000000..2a35934
--- /dev/null
+++ b/example/scriptTag.html
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+ vue-swipe examples
+
+
+
+
+
+
+
+
+
+
Image Full Screen
+
+
+
+
+
+
+
+
+
Default
+
+ Slide1
+ Slide2
+ Slide3
+
+
+
+
+
Change swipe
+
+ Slide1
+ Slide2
+ Slide3
+
+
+
+
+
+
+
+
Drag single swipe
+
+ SINGLE SLIDE
+
+
+
+
+
Default index
+
+ Slide1
+ Slide2
+ Slide3
+
+
+