diff --git a/.npmignore b/.npmignore
index 064e129..e6a0371 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,8 +1,8 @@
-/examples
-/examples-src
+/website/*
 /LICENSE
-/README.md
+/tests/*
 /.babelrc
+/karma.conf.js
 /.idea
 /node_modules
 /build
diff --git a/dist/vue-seamless-scroll.js b/dist/vue-seamless-scroll.js
index d1a6e0b..d9253b7 100644
--- a/dist/vue-seamless-scroll.js
+++ b/dist/vue-seamless-scroll.js
@@ -216,6 +216,10 @@ exports.default = {
     }
   },
   methods: {
+    reset: function reset() {
+      this._cancle();
+      this._initMove();
+    },
     leftSwitchClick: function leftSwitchClick() {
       if (!this.leftSwitchState) return;
 
@@ -437,14 +441,12 @@ exports.default = {
       this._dataWarm(newData);
 
       if (!arrayEqual(newData, oldData)) {
-        this._cancle();
-        this._initMove();
+        this.reset();
       }
     },
     autoPlay: function autoPlay(bol) {
       if (bol) {
-        this._cancle();
-        this._initMove();
+        this.reset();
       } else {
         this._stopMove();
       }
diff --git a/dist/vue-seamless-scroll.min.js b/dist/vue-seamless-scroll.min.js
index 332a778..e25cb4f 100644
--- a/dist/vue-seamless-scroll.min.js
+++ b/dist/vue-seamless-scroll.min.js
@@ -1 +1 @@
-!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define([],i):"object"==typeof exports?exports.vueSeamlessScroll=i():t.vueSeamlessScroll=i()}("undefined"!=typeof self?self:this,function(){return function(t){function i(o){if(e[o])return e[o].exports;var n=e[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,i),n.l=!0,n.exports}var e={};return i.m=t,i.c=e,i.d=function(t,e,o){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},i.p="",i(i.s=1)}([function(t,i,e){"use strict";Object.defineProperty(i,"__esModule",{value:!0}),e(4)();var o=e(5),n=e(6);i.default={name:"vue-seamless-scroll",data:function(){return{xPos:0,yPos:0,delay:0,copyHtml:"",height:0,width:0,realBoxWidth:0}},props:{data:{type:Array,default:function(){return[]}},classOption:{type:Object,default:function(){return{}}}},computed:{leftSwitchState:function(){return this.xPos<0},rightSwitchState:function(){return Math.abs(this.xPos)<this.realBoxWidth-this.width},leftSwitchClass:function(){return this.leftSwitchState?"":this.options.switchDisabledClass},rightSwitchClass:function(){return this.rightSwitchState?"":this.options.switchDisabledClass},leftSwitch:function(){return{position:"absolute",margin:this.height/2+"px 0 0 -"+this.options.switchOffset+"px",transform:"translate(-100%,-50%)"}},rightSwitch:function(){return{position:"absolute",margin:this.height/2+"px 0 0 "+(this.width+this.options.switchOffset)+"px",transform:"translateY(-50%)"}},float:function(){return this.isHorizontal?{float:"left",overflow:"hidden"}:{overflow:"hidden"}},pos:function(){return{transform:"translate("+this.xPos+"px,"+this.yPos+"px)",transition:"all "+this.ease+" "+this.delay+"ms",overflow:"hidden"}},defaultOption:function(){return{step:1,limitMoveNum:5,hoverStop:!0,direction:1,openTouch:!0,singleHeight:0,singleWidth:0,waitTime:1e3,switchOffset:30,autoPlay:!0,navigation:!1,switchSingleStep:134,switchDelay:400,switchDisabledClass:"disabled",isSingleRemUnit:!1}},options:function(){return n({},this.defaultOption,this.classOption)},navigation:function(){return this.options.navigation},autoPlay:function(){return!this.navigation&&this.options.autoPlay},scrollSwitch:function(){return this.data.length>=this.options.limitMoveNum},hoverStopSwitch:function(){return this.options.hoverStop&&this.autoPlay&&this.scrollSwitch},canTouchScroll:function(){return this.options.openTouch},isHorizontal:function(){return this.options.direction>1},baseFontSize:function(){return this.options.isSingleRemUnit?parseInt(window.getComputedStyle(document.documentElement,null).fontSize):1},realSingleStopWidth:function(){return this.options.singleWidth*this.baseFontSize},realSingleStopHeight:function(){return this.options.singleHeight*this.baseFontSize},step:function(){var t=this.options.step;return this.isHorizontal?this.realSingleStopWidth:this.realSingleStopHeight,t}},methods:{leftSwitchClick:function(){if(this.leftSwitchState)return Math.abs(this.xPos)<this.options.switchSingleStep?void(this.xPos=0):void(this.xPos+=this.options.switchSingleStep)},rightSwitchClick:function(){if(this.rightSwitchState)return this.realBoxWidth-this.width+this.xPos<this.options.switchSingleStep?void(this.xPos=this.width-this.realBoxWidth):void(this.xPos-=this.options.switchSingleStep)},_cancle:function(){cancelAnimationFrame(this.reqFrame||"")},touchStart:function(t){var i=this;if(this.canTouchScroll){var e=void 0,o=t.targetTouches[0],n=this.options,s=n.waitTime,r=n.singleHeight,a=n.singleWidth;this.startPos={x:o.pageX,y:o.pageY},this.startPosY=this.yPos,this.startPosX=this.xPos,r&&a?(e&&clearTimeout(e),e=setTimeout(function(){i._cancle()},s+20)):this._cancle()}},touchMove:function(t){if(!(!this.canTouchScroll||t.targetTouches.length>1||t.scale&&1!==t.scale)){var i=t.targetTouches[0],e=this.options.direction;this.endPos={x:i.pageX-this.startPos.x,y:i.pageY-this.startPos.y},event.preventDefault();var o=Math.abs(this.endPos.x)<Math.abs(this.endPos.y)?1:0;1===o&&e<2?this.yPos=this.startPosY+this.endPos.y:0===o&&e>1&&(this.xPos=this.startPosX+this.endPos.x)}},touchEnd:function(){var t=this;if(this.canTouchScroll){var i=void 0,e=this.options.direction;if(this.delay=50,1===e)this.yPos>0&&(this.yPos=0);else if(0===e){var o=this.realBoxHeight/2*-1;this.yPos<o&&(this.yPos=o)}else if(2===e)this.xPos>0&&(this.xPos=0);else if(3===e){var n=-1*this.realBoxWidth;this.xPos<n&&(this.xPos=n)}i&&clearTimeout(i),i=setTimeout(function(){t.delay=0,t._move()},this.delay)}},enter:function(){this.hoverStopSwitch&&this._stopMove()},leave:function(){this.hoverStopSwitch&&this._startMove()},_move:function(){this.isHover||(this._cancle(),this.reqFrame=requestAnimationFrame(function(){var t=this,i=this.realBoxHeight/2,e=this.realBoxWidth/2,o=this.options,n=o.direction,s=o.waitTime,r=this.step;1===n?(Math.abs(this.yPos)>=i&&(this.$emit("ScrollEnd"),this.yPos=0),this.yPos-=r):0===n?(this.yPos>=0&&(this.$emit("ScrollEnd"),this.yPos=-1*i),this.yPos+=r):2===n?(Math.abs(this.xPos)>=e&&(this.$emit("ScrollEnd"),this.xPos=0),this.xPos-=r):3===n&&(this.xPos>=0&&(this.$emit("ScrollEnd"),this.xPos=-1*e),this.xPos+=r),this.singleWaitTime&&clearTimeout(this.singleWaitTime),this.realSingleStopHeight?Math.abs(this.yPos)%this.realSingleStopHeight<r?this.singleWaitTime=setTimeout(function(){t._move()},s):this._move():this.realSingleStopWidth&&Math.abs(this.xPos)%this.realSingleStopWidth<r?this.singleWaitTime=setTimeout(function(){t._move()},s):this._move()}.bind(this)))},_initMove:function(){var t=this;this.$nextTick(function(){var i=t.options.switchDelay,e=t.autoPlay,o=t.isHorizontal;if(t._dataWarm(t.data),t.copyHtml="",o){t.height=t.$refs.wrap.offsetHeight,t.width=t.$refs.wrap.offsetWidth;var n=t.$refs.slotList.offsetWidth;e&&(n=2*n+1),t.$refs.realBox.style.width=n+"px",t.realBoxWidth=n}if(!e)return t.ease="linear",void(t.delay=i);if(t.ease="ease-in",t.delay=0,t.scrollSwitch){t.copyHtml=t.$refs.slotList.innerHTML,setTimeout(function(){t.realBoxHeight=t.$refs.realBox.offsetHeight,t._move()},0)}else t._cancle(),t.yPos=t.xPos=0})},_dataWarm:function(t){t.length},_startMove:function(){this.isHover=!1,this._move()},_stopMove:function(){this.isHover=!0,this.singleWaitTime&&clearTimeout(this.singleWaitTime),this._cancle()}},mounted:function(){this._initMove()},watch:{data:function(t,i){this._dataWarm(t),o(t,i)||(this._cancle(),this._initMove())},autoPlay:function(t){t?(this._cancle(),this._initMove()):this._stopMove()}},beforeCreate:function(){this.reqFrame=null,this.singleWaitTime=null,this.isHover=!1,this.ease="ease-in"},beforeDestroy:function(){this._cancle(),clearTimeout(this.singleWaitTime)}}},function(t,i,e){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var o=e(2),n=function(t){return t&&t.__esModule?t:{default:t}}(o);n.default.install=function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};t.component(i.componentName||n.default.name,n.default)},"undefined"!=typeof window&&window.Vue&&Vue.component(n.default.name,n.default),i.default=n.default},function(t,i,e){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var o=e(0),n=e.n(o);for(var s in o)"default"!==s&&function(t){e.d(i,t,function(){return o[t]})}(s);var r=e(7),a=e(3),h=a(n.a,r.a,!1,null,null,null);i.default=h.exports},function(t,i){t.exports=function(t,i,e,o,n,s){var r,a=t=t||{},h=typeof t.default;"object"!==h&&"function"!==h||(r=t,a=t.default);var l="function"==typeof a?a.options:a;i&&(l.render=i.render,l.staticRenderFns=i.staticRenderFns,l._compiled=!0),e&&(l.functional=!0),n&&(l._scopeId=n);var c;if(s?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},l._ssrRegister=c):o&&(c=o),c){var u=l.functional,f=u?l.render:l.beforeCreate;u?(l._injectStyles=c,l.render=function(t,i){return c.call(i),f(t,i)}):l.beforeCreate=f?[].concat(f,c):[c]}return{esModule:r,exports:a,options:l}}},function(t,i){var e=function(){window.cancelAnimationFrame=function(){return window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.oCancelAnimationFrame||window.msCancelAnimationFrame||function(t){return window.clearTimeout(t)}}(),window.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){return window.setTimeout(t,1e3/60)}}()};t.exports=e},function(t,i){var e=function(t,i){if(t===i)return!0;if(t.length!==i.length)return!1;for(var e=0;e<t.length;++e)if(t[e]!==i[e])return!1;return!0};t.exports=e},function(t,i){function e(){Array.isArray||(Array.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)});var t=void 0,i=void 0,n=void 0,s=void 0,r=void 0,a=void 0,h=1,l=arguments[0]||{},c=!1,u=arguments.length;if("boolean"==typeof l&&(c=l,l=arguments[1]||{},h++),"object"!==(void 0===l?"undefined":o(l))&&"function"!=typeof l&&(l={}),h===u)return l;for(;h<u;h++)if(null!=(i=arguments[h]))for(t in i)n=l[t],s=i[t],r=Array.isArray(s),c&&s&&("object"===(void 0===s?"undefined":o(s))||r)?(r?(r=!1,a=n&&Array.isArray(n)?n:[]):a=n&&"object"===(void 0===n?"undefined":o(n))?n:{},l[t]=e(c,a,s)):void 0!==s&&(l[t]=s);return l}var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};t.exports=e},function(t,i,e){"use strict";var o=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{ref:"wrap"},[t.navigation?e("div",{class:t.leftSwitchClass,style:t.leftSwitch,on:{click:t.leftSwitchClick}},[t._t("left-switch")],2):t._e(),t._v(" "),t.navigation?e("div",{class:t.rightSwitchClass,style:t.rightSwitch,on:{click:t.rightSwitchClick}},[t._t("right-switch")],2):t._e(),t._v(" "),e("div",{ref:"realBox",style:t.pos,on:{mouseenter:t.enter,mouseleave:t.leave,touchstart:t.touchStart,touchmove:t.touchMove,touchend:t.touchEnd}},[e("div",{ref:"slotList",style:t.float},[t._t("default")],2),t._v(" "),e("div",{style:t.float,domProps:{innerHTML:t._s(t.copyHtml)}})])])},n=[],s={render:o,staticRenderFns:n};i.a=s}]).default});
\ No newline at end of file
+!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define([],i):"object"==typeof exports?exports.vueSeamlessScroll=i():t.vueSeamlessScroll=i()}("undefined"!=typeof self?self:this,function(){return function(t){function i(o){if(e[o])return e[o].exports;var n=e[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,i),n.l=!0,n.exports}var e={};return i.m=t,i.c=e,i.d=function(t,e,o){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},i.p="",i(i.s=1)}([function(t,i,e){"use strict";Object.defineProperty(i,"__esModule",{value:!0}),e(4)();var o=e(5),n=e(6);i.default={name:"vue-seamless-scroll",data:function(){return{xPos:0,yPos:0,delay:0,copyHtml:"",height:0,width:0,realBoxWidth:0}},props:{data:{type:Array,default:function(){return[]}},classOption:{type:Object,default:function(){return{}}}},computed:{leftSwitchState:function(){return this.xPos<0},rightSwitchState:function(){return Math.abs(this.xPos)<this.realBoxWidth-this.width},leftSwitchClass:function(){return this.leftSwitchState?"":this.options.switchDisabledClass},rightSwitchClass:function(){return this.rightSwitchState?"":this.options.switchDisabledClass},leftSwitch:function(){return{position:"absolute",margin:this.height/2+"px 0 0 -"+this.options.switchOffset+"px",transform:"translate(-100%,-50%)"}},rightSwitch:function(){return{position:"absolute",margin:this.height/2+"px 0 0 "+(this.width+this.options.switchOffset)+"px",transform:"translateY(-50%)"}},float:function(){return this.isHorizontal?{float:"left",overflow:"hidden"}:{overflow:"hidden"}},pos:function(){return{transform:"translate("+this.xPos+"px,"+this.yPos+"px)",transition:"all "+this.ease+" "+this.delay+"ms",overflow:"hidden"}},defaultOption:function(){return{step:1,limitMoveNum:5,hoverStop:!0,direction:1,openTouch:!0,singleHeight:0,singleWidth:0,waitTime:1e3,switchOffset:30,autoPlay:!0,navigation:!1,switchSingleStep:134,switchDelay:400,switchDisabledClass:"disabled",isSingleRemUnit:!1}},options:function(){return n({},this.defaultOption,this.classOption)},navigation:function(){return this.options.navigation},autoPlay:function(){return!this.navigation&&this.options.autoPlay},scrollSwitch:function(){return this.data.length>=this.options.limitMoveNum},hoverStopSwitch:function(){return this.options.hoverStop&&this.autoPlay&&this.scrollSwitch},canTouchScroll:function(){return this.options.openTouch},isHorizontal:function(){return this.options.direction>1},baseFontSize:function(){return this.options.isSingleRemUnit?parseInt(window.getComputedStyle(document.documentElement,null).fontSize):1},realSingleStopWidth:function(){return this.options.singleWidth*this.baseFontSize},realSingleStopHeight:function(){return this.options.singleHeight*this.baseFontSize},step:function(){var t=this.options.step;return this.isHorizontal?this.realSingleStopWidth:this.realSingleStopHeight,t}},methods:{reset:function(){this._cancle(),this._initMove()},leftSwitchClick:function(){if(this.leftSwitchState)return Math.abs(this.xPos)<this.options.switchSingleStep?void(this.xPos=0):void(this.xPos+=this.options.switchSingleStep)},rightSwitchClick:function(){if(this.rightSwitchState)return this.realBoxWidth-this.width+this.xPos<this.options.switchSingleStep?void(this.xPos=this.width-this.realBoxWidth):void(this.xPos-=this.options.switchSingleStep)},_cancle:function(){cancelAnimationFrame(this.reqFrame||"")},touchStart:function(t){var i=this;if(this.canTouchScroll){var e=void 0,o=t.targetTouches[0],n=this.options,s=n.waitTime,r=n.singleHeight,a=n.singleWidth;this.startPos={x:o.pageX,y:o.pageY},this.startPosY=this.yPos,this.startPosX=this.xPos,r&&a?(e&&clearTimeout(e),e=setTimeout(function(){i._cancle()},s+20)):this._cancle()}},touchMove:function(t){if(!(!this.canTouchScroll||t.targetTouches.length>1||t.scale&&1!==t.scale)){var i=t.targetTouches[0],e=this.options.direction;this.endPos={x:i.pageX-this.startPos.x,y:i.pageY-this.startPos.y},event.preventDefault();var o=Math.abs(this.endPos.x)<Math.abs(this.endPos.y)?1:0;1===o&&e<2?this.yPos=this.startPosY+this.endPos.y:0===o&&e>1&&(this.xPos=this.startPosX+this.endPos.x)}},touchEnd:function(){var t=this;if(this.canTouchScroll){var i=void 0,e=this.options.direction;if(this.delay=50,1===e)this.yPos>0&&(this.yPos=0);else if(0===e){var o=this.realBoxHeight/2*-1;this.yPos<o&&(this.yPos=o)}else if(2===e)this.xPos>0&&(this.xPos=0);else if(3===e){var n=-1*this.realBoxWidth;this.xPos<n&&(this.xPos=n)}i&&clearTimeout(i),i=setTimeout(function(){t.delay=0,t._move()},this.delay)}},enter:function(){this.hoverStopSwitch&&this._stopMove()},leave:function(){this.hoverStopSwitch&&this._startMove()},_move:function(){this.isHover||(this._cancle(),this.reqFrame=requestAnimationFrame(function(){var t=this,i=this.realBoxHeight/2,e=this.realBoxWidth/2,o=this.options,n=o.direction,s=o.waitTime,r=this.step;1===n?(Math.abs(this.yPos)>=i&&(this.$emit("ScrollEnd"),this.yPos=0),this.yPos-=r):0===n?(this.yPos>=0&&(this.$emit("ScrollEnd"),this.yPos=-1*i),this.yPos+=r):2===n?(Math.abs(this.xPos)>=e&&(this.$emit("ScrollEnd"),this.xPos=0),this.xPos-=r):3===n&&(this.xPos>=0&&(this.$emit("ScrollEnd"),this.xPos=-1*e),this.xPos+=r),this.singleWaitTime&&clearTimeout(this.singleWaitTime),this.realSingleStopHeight?Math.abs(this.yPos)%this.realSingleStopHeight<r?this.singleWaitTime=setTimeout(function(){t._move()},s):this._move():this.realSingleStopWidth&&Math.abs(this.xPos)%this.realSingleStopWidth<r?this.singleWaitTime=setTimeout(function(){t._move()},s):this._move()}.bind(this)))},_initMove:function(){var t=this;this.$nextTick(function(){var i=t.options.switchDelay,e=t.autoPlay,o=t.isHorizontal;if(t._dataWarm(t.data),t.copyHtml="",o){t.height=t.$refs.wrap.offsetHeight,t.width=t.$refs.wrap.offsetWidth;var n=t.$refs.slotList.offsetWidth;e&&(n=2*n+1),t.$refs.realBox.style.width=n+"px",t.realBoxWidth=n}if(!e)return t.ease="linear",void(t.delay=i);if(t.ease="ease-in",t.delay=0,t.scrollSwitch){t.copyHtml=t.$refs.slotList.innerHTML,setTimeout(function(){t.realBoxHeight=t.$refs.realBox.offsetHeight,t._move()},0)}else t._cancle(),t.yPos=t.xPos=0})},_dataWarm:function(t){t.length},_startMove:function(){this.isHover=!1,this._move()},_stopMove:function(){this.isHover=!0,this.singleWaitTime&&clearTimeout(this.singleWaitTime),this._cancle()}},mounted:function(){this._initMove()},watch:{data:function(t,i){this._dataWarm(t),o(t,i)||this.reset()},autoPlay:function(t){t?this.reset():this._stopMove()}},beforeCreate:function(){this.reqFrame=null,this.singleWaitTime=null,this.isHover=!1,this.ease="ease-in"},beforeDestroy:function(){this._cancle(),clearTimeout(this.singleWaitTime)}}},function(t,i,e){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var o=e(2),n=function(t){return t&&t.__esModule?t:{default:t}}(o);n.default.install=function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};t.component(i.componentName||n.default.name,n.default)},"undefined"!=typeof window&&window.Vue&&Vue.component(n.default.name,n.default),i.default=n.default},function(t,i,e){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var o=e(0),n=e.n(o);for(var s in o)"default"!==s&&function(t){e.d(i,t,function(){return o[t]})}(s);var r=e(7),a=e(3),h=a(n.a,r.a,!1,null,null,null);i.default=h.exports},function(t,i){t.exports=function(t,i,e,o,n,s){var r,a=t=t||{},h=typeof t.default;"object"!==h&&"function"!==h||(r=t,a=t.default);var l="function"==typeof a?a.options:a;i&&(l.render=i.render,l.staticRenderFns=i.staticRenderFns,l._compiled=!0),e&&(l.functional=!0),n&&(l._scopeId=n);var c;if(s?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},l._ssrRegister=c):o&&(c=o),c){var u=l.functional,f=u?l.render:l.beforeCreate;u?(l._injectStyles=c,l.render=function(t,i){return c.call(i),f(t,i)}):l.beforeCreate=f?[].concat(f,c):[c]}return{esModule:r,exports:a,options:l}}},function(t,i){var e=function(){window.cancelAnimationFrame=function(){return window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.oCancelAnimationFrame||window.msCancelAnimationFrame||function(t){return window.clearTimeout(t)}}(),window.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){return window.setTimeout(t,1e3/60)}}()};t.exports=e},function(t,i){var e=function(t,i){if(t===i)return!0;if(t.length!==i.length)return!1;for(var e=0;e<t.length;++e)if(t[e]!==i[e])return!1;return!0};t.exports=e},function(t,i){function e(){Array.isArray||(Array.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)});var t=void 0,i=void 0,n=void 0,s=void 0,r=void 0,a=void 0,h=1,l=arguments[0]||{},c=!1,u=arguments.length;if("boolean"==typeof l&&(c=l,l=arguments[1]||{},h++),"object"!==(void 0===l?"undefined":o(l))&&"function"!=typeof l&&(l={}),h===u)return l;for(;h<u;h++)if(null!=(i=arguments[h]))for(t in i)n=l[t],s=i[t],r=Array.isArray(s),c&&s&&("object"===(void 0===s?"undefined":o(s))||r)?(r?(r=!1,a=n&&Array.isArray(n)?n:[]):a=n&&"object"===(void 0===n?"undefined":o(n))?n:{},l[t]=e(c,a,s)):void 0!==s&&(l[t]=s);return l}var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};t.exports=e},function(t,i,e){"use strict";var o=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{ref:"wrap"},[t.navigation?e("div",{class:t.leftSwitchClass,style:t.leftSwitch,on:{click:t.leftSwitchClick}},[t._t("left-switch")],2):t._e(),t._v(" "),t.navigation?e("div",{class:t.rightSwitchClass,style:t.rightSwitch,on:{click:t.rightSwitchClick}},[t._t("right-switch")],2):t._e(),t._v(" "),e("div",{ref:"realBox",style:t.pos,on:{mouseenter:t.enter,mouseleave:t.leave,touchstart:t.touchStart,touchmove:t.touchMove,touchend:t.touchEnd}},[e("div",{ref:"slotList",style:t.float},[t._t("default")],2),t._v(" "),e("div",{style:t.float,domProps:{innerHTML:t._s(t.copyHtml)}})])])},n=[],s={render:o,staticRenderFns:n};i.a=s}]).default});
\ No newline at end of file
diff --git a/package.json b/package.json
index 6d74826..6d1c6ba 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
 	"name": "vue-seamless-scroll",
-	"version": "1.1.21",
+	"version": "1.1.23",
 	"description": "A simple, Seamless scrolling for Vue.js",
 	"main": "dist/vue-seamless-scroll.min.js",
 	"scripts": {
 		"build:debug": "cross-env NODE_ENV=debug webpack --config build/webpack.dist.js",
 		"build:prod": "cross-env NODE_ENV=production webpack --config build/webpack.dist.js",
-		"build:all": "npm run build:debug && npm run build:prod && npm run build:examples",
+		"build:all": "npm run build:debug && npm run build:prod",
 		"unit:test": "cross-env BABEL_ENV=test karma start --single-run"
 	},
 	"author": "chenxuan",
diff --git a/src/components/myClass.vue b/src/components/myClass.vue
index a2122e3..5a532d6 100644
--- a/src/components/myClass.vue
+++ b/src/components/myClass.vue
@@ -1,9 +1,19 @@
 <template>
   <div ref="wrap">
-    <div :style="leftSwitch" v-if="navigation" :class="leftSwitchClass" @click="leftSwitchClick">
+    <div
+      :style="leftSwitch"
+      v-if="navigation"
+      :class="leftSwitchClass"
+      @click="leftSwitchClick"
+    >
       <slot name="left-switch"></slot>
     </div>
-    <div :style="rightSwitch" v-if="navigation" :class="rightSwitchClass" @click="rightSwitchClick">
+    <div
+      :style="rightSwitch"
+      v-if="navigation"
+      :class="rightSwitchClass"
+      @click="rightSwitchClick"
+    >
       <slot name="right-switch"></slot>
     </div>
     <div
@@ -156,6 +166,10 @@
       }
     },
     methods: {
+      reset () {
+        this._cancle()
+        this._initMove()
+      },
       leftSwitchClick () {
         if (!this.leftSwitchState) return
         // 小于单步距离
@@ -357,7 +371,7 @@
         // 防止频频hover进出单步滚动,导致定时器乱掉
         if (this.singleWaitTime) clearTimeout(this.singleWaitTime)
         this._cancle()
-      }
+      },
     },
     mounted () {
       this._initMove()
@@ -367,14 +381,12 @@
         this._dataWarm(newData)
         //监听data是否有变更
         if (!arrayEqual(newData, oldData)) {
-          this._cancle()
-          this._initMove()
+          this.reset()
         }
       },
       autoPlay (bol) {
         if (bol) {
-          this._cancle()
-          this._initMove()
+          this.reset()
         } else {
           this._stopMove()
         }
diff --git a/website/docs/.vuepress/components/Example09Basic.vue b/website/docs/.vuepress/components/Example09Basic.vue
new file mode 100644
index 0000000..51787aa
--- /dev/null
+++ b/website/docs/.vuepress/components/Example09Basic.vue
@@ -0,0 +1,108 @@
+<template>
+  <vue-seamless-scroll
+    :data="listData"
+    :class-option="classOption"
+    class="warp"
+  >
+    <ul class="ul-item">
+      <li class="li-item" v-for="(item, index) in listData" :key="index"></li>
+    </ul>
+  </vue-seamless-scroll>
+</template>
+
+<script>
+  import vueSeamlessScroll from 'vue-seamless-scroll'
+  import echarts from 'echarts'
+
+  export default {
+    name: 'Example09Basic',
+    components: {
+      vueSeamlessScroll
+    },
+    data () {
+      return {
+        listData: [1, 2, 3, 4, 5, 6],
+        classOption: {
+          limitMoveNum: 2,
+          direction: 3,
+        }
+      }
+    },
+    methods: {
+      drawChart (dom) {
+        const myChart = echarts.init(dom)
+        myChart.setOption({
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c} ({d}%)'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 10,
+            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+          },
+          series: [
+            {
+              name: '访问来源',
+              type: 'pie',
+              radius: ['50%', '70%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '30',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 335, name: '直接访问' },
+                { value: 310, name: '邮件营销' },
+                { value: 234, name: '联盟广告' },
+                { value: 135, name: '视频广告' },
+                { value: 1548, name: '搜索引擎' }
+              ]
+            }
+          ]
+        });
+      }
+    },
+    mounted () {
+      // echart渲染放到setTimeout宏任务,这时vue-seamless-scroll组件内部复制完成
+      setTimeout(() => {
+        document.querySelectorAll('.li-item').forEach(dom => {
+          this.drawChart(dom);
+        });
+      }, 0);
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .warp {
+    width: 240px * 3;
+    height: 210px;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      &.ul-item {
+        display: flex;
+        .li-item {
+          width: 240px;
+          height: 200px;
+          margin-right: 10px;
+          border: 1px solid #000;
+        }
+      }
+    }
+  }
+</style>
diff --git a/website/docs/.vuepress/components/Example10Basic.vue b/website/docs/.vuepress/components/Example10Basic.vue
new file mode 100644
index 0000000..482a633
--- /dev/null
+++ b/website/docs/.vuepress/components/Example10Basic.vue
@@ -0,0 +1,99 @@
+<template>
+  <vue-seamless-scroll :data="listData" class="warp" ref="seamlessScroll">
+    <ul class="item">
+      <li v-for="(item, index) in listData" :key="index">
+        <span class="title" v-text="item.title"></span>
+        <span class="date" v-text="item.date"></span>
+      </li>
+    </ul>
+  </vue-seamless-scroll>
+</template>
+
+<script>
+  import vueSeamlessScroll from 'vue-seamless-scroll'
+
+  export default {
+    name: 'Example10Basic',
+    components: {
+      vueSeamlessScroll
+    },
+    data () {
+      return {
+        listData: [{
+          'title': '无缝滚动第一行无缝滚动第一行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第二行无缝滚动第二行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第三行无缝滚动第三行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第四行无缝滚动第四行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第五行无缝滚动第五行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第六行无缝滚动第六行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第七行无缝滚动第七行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第八行无缝滚动第八行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第九行无缝滚动第九行',
+          'date': '2017-12-16'
+        }],
+      }
+    },
+    mounted() {
+      setTimeout(() => {
+        this.listData[0] = {
+          title: '我的第一条的title，我被更新了。',
+          date: 'date1'
+        }
+        this.listData[1] = {
+          title: '我的第二条的title，我被更新了。',
+          date: 'date2'
+        }
+        this.listData[2] = {
+          title: '我的第三条的title，我被更新了。',
+          date: 'date3'
+        }
+        this.listData[3] = {
+          title: '我的第四条的title，我被更新了。',
+          date: 'date4'
+        }
+        this.listData.push()
+        // listData length无变化，仅仅是属性变更，手动调用下组件内部的reset方法
+        this.$refs.seamlessScroll.reset()
+      }, 2000);
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .warp {
+    height: 270px;
+    width: 360px;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      li,
+      a {
+        display: block;
+        height: 30px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 15px;
+      }
+    }
+  }
+</style>
diff --git a/website/docs/.vuepress/components/Example11Basic.vue b/website/docs/.vuepress/components/Example11Basic.vue
new file mode 100644
index 0000000..e9f9326
--- /dev/null
+++ b/website/docs/.vuepress/components/Example11Basic.vue
@@ -0,0 +1,87 @@
+<template>
+  <vue-seamless-scroll :data="listData" class="warp" ref="seamlessScroll">
+    <ul class="item">
+      <li v-for="(item, index) in listData" :key="index">
+        <span class="title" v-text="item.title"></span>
+        <span class="date" v-text="item.date"></span>
+      </li>
+    </ul>
+  </vue-seamless-scroll>
+</template>
+
+<script>
+  import vueSeamlessScroll from 'vue-seamless-scroll'
+
+  export default {
+    name: 'Example11Basic',
+    components: {
+      vueSeamlessScroll
+    },
+    data () {
+      return {
+        listData: [{
+          'title': '无缝滚动第一行无缝滚动第一行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第二行无缝滚动第二行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第三行无缝滚动第三行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第四行无缝滚动第四行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第五行无缝滚动第五行',
+          'date': '2017-12-16'
+        }],
+      }
+    },
+    mounted () {
+      setTimeout(() => {
+        this.listData = [
+          ...this.listData,
+          {
+            'title': '无缝滚动第⑥行无缝滚动第五行',
+            'date': '2017-12-16'
+          },
+          {
+            'title': '无缝滚动第⑦行无缝滚动第五行',
+            'date': '2017-12-16'
+          },
+          {
+            'title': '无缝滚动第⑧行无缝滚动第五行',
+            'date': '2017-12-16'
+          },
+          {
+            'title': '无缝滚动第⑨行无缝滚动第五行',
+            'date': '2017-12-16'
+          }
+        ]
+      }, 1000);
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .warp {
+    height: 270px;
+    width: 360px;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      li,
+      a {
+        display: block;
+        height: 30px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 15px;
+      }
+    }
+  }
+</style>
diff --git a/website/docs/.vuepress/config.js b/website/docs/.vuepress/config.js
index d287e1e..8fc80c9 100644
--- a/website/docs/.vuepress/config.js
+++ b/website/docs/.vuepress/config.js
@@ -63,6 +63,9 @@ module.exports = {
                 "06-singleStop",
                 "07-singleStopTime",
                 "08-switch",
+                "09-echart",
+                "10-array-property-update",
+                "11-array-length-update",
               ],
             },
           ],
@@ -115,6 +118,9 @@ module.exports = {
                 "06-singleStop",
                 "07-singleStopTime",
                 "08-switch",
+                "09-echart",
+                "10-array-property-update",
+                "11-array-length-update",
               ],
             },
           ],
diff --git a/website/docs/changelog/README.md b/website/docs/changelog/README.md
index 0bcbacb..c604d67 100644
--- a/website/docs/changelog/README.md
+++ b/website/docs/changelog/README.md
@@ -3,11 +3,13 @@ sidebar: auto
 ---
 # Changelog
 
-## 1.1.21 (2020-04-05)
+## 1.1.23 (2020-12-06)
 
-*  fixed issues: [#68](https://github.com/chenxuan0000/vue-seamless-scroll/issues/68) [#87](https://github.com/chenxuan0000/vue-seamless-scroll/issues/87) [#89](https://github.com/chenxuan0000/vue-seamless-scroll/issues/89)
+*  fixed issues: [#138](https://github.com/chenxuan0000/vue-seamless-scroll/issues/138) [#136](https://github.com/chenxuan0000/vue-seamless-scroll/issues/136) [#127](https://github.com/chenxuan0000/vue-seamless-scroll/issues/127)
 
+## 1.1.21 (2020-04-05)
 
+*  fixed issues: [#68](https://github.com/chenxuan0000/vue-seamless-scroll/issues/68) [#87](https://github.com/chenxuan0000/vue-seamless-scroll/issues/87) [#89](https://github.com/chenxuan0000/vue-seamless-scroll/issues/89)
 
 ## 1.1.20 (2020-04-05)
 
diff --git a/website/docs/guide/09-echart.md b/website/docs/guide/09-echart.md
new file mode 100644
index 0000000..017aeab
--- /dev/null
+++ b/website/docs/guide/09-echart.md
@@ -0,0 +1,118 @@
+# 09 - echart图表无缝滚动
+
+<ClientOnly>
+<Example09Basic></Example09Basic>
+</ClientOnly>
+
+```vue
+<template>
+  <vue-seamless-scroll
+    :data="listData"
+    :class-option="classOption"
+    class="warp"
+  >
+    <ul class="ul-item">
+      <li class="li-item" v-for="(item, index) in listData" :key="index"></li>
+    </ul>
+  </vue-seamless-scroll>
+</template>
+
+<script>
+  import vueSeamlessScroll from 'vue-seamless-scroll'
+  import echarts from 'echarts'
+
+  export default {
+    name: 'Example09Basic',
+    components: {
+      vueSeamlessScroll
+    },
+    data () {
+      return {
+        listData: [1, 2, 3, 4, 5, 6],
+        classOption: {
+          limitMoveNum: 2,
+          direction: 3,
+        }
+      }
+    },
+    methods: {
+      drawChart (dom) {
+        const myChart = echarts.init(dom)
+        myChart.setOption({
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c} ({d}%)'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 10,
+            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+          },
+          series: [
+            {
+              name: '访问来源',
+              type: 'pie',
+              radius: ['50%', '70%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '30',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 335, name: '直接访问' },
+                { value: 310, name: '邮件营销' },
+                { value: 234, name: '联盟广告' },
+                { value: 135, name: '视频广告' },
+                { value: 1548, name: '搜索引擎' }
+              ]
+            }
+          ]
+        });
+      }
+    },
+    mounted () {
+      // echart渲染放到setTimeout宏任务,这时vue-seamless-scroll组件内部复制完成
+      setTimeout(() => {
+        document.querySelectorAll('.li-item').forEach(dom => {
+          this.drawChart(dom);
+        });
+      }, 0);
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .warp {
+    width: 240px * 3;
+    height: 210px;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      &.ul-item {
+        display: flex;
+        .li-item {
+          width: 240px;
+          height: 200px;
+          margin-right: 10px;
+          border: 1px solid #000;
+        }
+      }
+    }
+  }
+</style>
+
+```
+
diff --git a/website/docs/guide/10-array-property-update.md b/website/docs/guide/10-array-property-update.md
new file mode 100644
index 0000000..84bb965
--- /dev/null
+++ b/website/docs/guide/10-array-property-update.md
@@ -0,0 +1,109 @@
+# 10 - 复杂结构数组属性更新问题
+
+<ClientOnly>
+<Example10Basic></Example10Basic>
+</ClientOnly>
+
+```vue
+<template>
+  <vue-seamless-scroll :data="listData" class="warp" ref="seamlessScroll">
+    <ul class="item">
+      <li v-for="(item, index) in listData" :key="index">
+        <span class="title" v-text="item.title"></span>
+        <span class="date" v-text="item.date"></span>
+      </li>
+    </ul>
+  </vue-seamless-scroll>
+</template>
+
+<script>
+  import vueSeamlessScroll from 'vue-seamless-scroll'
+
+  export default {
+    name: 'Example10Basic',
+    components: {
+      vueSeamlessScroll
+    },
+    data () {
+      return {
+        listData: [{
+          'title': '无缝滚动第一行无缝滚动第一行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第二行无缝滚动第二行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第三行无缝滚动第三行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第四行无缝滚动第四行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第五行无缝滚动第五行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第六行无缝滚动第六行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第七行无缝滚动第七行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第八行无缝滚动第八行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第九行无缝滚动第九行',
+          'date': '2017-12-16'
+        }],
+      }
+    },
+    mounted() {
+      setTimeout(() => {
+        this.listData[0] = {
+          title: '我的第一条的title，我被更新了。',
+          date: 'date1'
+        }
+        this.listData[1] = {
+          title: '我的第二条的title，我被更新了。',
+          date: 'date2'
+        }
+        this.listData[2] = {
+          title: '我的第三条的title，我被更新了。',
+          date: 'date3'
+        }
+        this.listData[3] = {
+          title: '我的第四条的title，我被更新了。',
+          date: 'date4'
+        }
+        this.listData.push()
+        // listData length无变化，仅仅是属性变更，手动调用下组件内部的reset方法
+        this.$refs.seamlessScroll.reset()
+      }, 2000);
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .warp {
+    height: 270px;
+    width: 360px;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      li,
+      a {
+        display: block;
+        height: 30px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 15px;
+      }
+    }
+  }
+</style>
+
+```
+
diff --git a/website/docs/guide/11-array-length-update.md b/website/docs/guide/11-array-length-update.md
new file mode 100644
index 0000000..cf31380
--- /dev/null
+++ b/website/docs/guide/11-array-length-update.md
@@ -0,0 +1,109 @@
+# 11 - 滚动列表动态追加数据
+
+<ClientOnly>
+<Example11Basic></Example11Basic>
+</ClientOnly>
+
+```vue
+<template>
+  <vue-seamless-scroll :data="listData" class="warp" ref="seamlessScroll">
+    <ul class="item">
+      <li v-for="(item, index) in listData" :key="index">
+        <span class="title" v-text="item.title"></span>
+        <span class="date" v-text="item.date"></span>
+      </li>
+    </ul>
+  </vue-seamless-scroll>
+</template>
+
+<script>
+  import vueSeamlessScroll from 'vue-seamless-scroll'
+
+  export default {
+    name: 'Example10Basic',
+    components: {
+      vueSeamlessScroll
+    },
+    data () {
+      return {
+        listData: [{
+          'title': '无缝滚动第一行无缝滚动第一行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第二行无缝滚动第二行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第三行无缝滚动第三行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第四行无缝滚动第四行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第五行无缝滚动第五行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第六行无缝滚动第六行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第七行无缝滚动第七行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第八行无缝滚动第八行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第九行无缝滚动第九行',
+          'date': '2017-12-16'
+        }],
+      }
+    },
+    mounted() {
+      setTimeout(() => {
+        this.listData[0] = {
+          title: '我的第一条的title，我被更新了。',
+          date: 'date1'
+        }
+        this.listData[1] = {
+          title: '我的第二条的title，我被更新了。',
+          date: 'date2'
+        }
+        this.listData[2] = {
+          title: '我的第三条的title，我被更新了。',
+          date: 'date3'
+        }
+        this.listData[3] = {
+          title: '我的第四条的title，我被更新了。',
+          date: 'date4'
+        }
+        this.listData.push()
+        // listData length无变化，仅仅是属性变更，手动调用下组件内部的reset方法
+        this.$refs.seamlessScroll.reset()
+      }, 2000);
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .warp {
+    height: 270px;
+    width: 360px;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      li,
+      a {
+        display: block;
+        height: 30px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 15px;
+      }
+    }
+  }
+</style>
+
+```
+
diff --git a/website/docs/zh/changelog/README.md b/website/docs/zh/changelog/README.md
index 0351bb2..7321269 100644
--- a/website/docs/zh/changelog/README.md
+++ b/website/docs/zh/changelog/README.md
@@ -3,17 +3,18 @@ sidebar: auto
 ---
 # 更新日志
 
+## 1.1.23 (2020-12-06)
+
+*  fixed issues: [#138](https://github.com/chenxuan0000/vue-seamless-scroll/issues/138) [#136](https://github.com/chenxuan0000/vue-seamless-scroll/issues/136) [#127](https://github.com/chenxuan0000/vue-seamless-scroll/issues/127)
 ## 1.1.21 (2020-04-05)
 
 *  fixed issues: [#68](https://github.com/chenxuan0000/vue-seamless-scroll/issues/68) [#87](https://github.com/chenxuan0000/vue-seamless-scroll/issues/87) [#89](https://github.com/chenxuan0000/vue-seamless-scroll/issues/89)
 
 
-
 ## 1.1.20 (2020-04-05)
 
 *  文档更新，源码微调
 
-
 ## 1.1.17 (2019-07-29)
 
 *  fixed: step属性设置为1以下的小数点，向上滚动有卡顿的晃动。
diff --git a/website/docs/zh/guide/09-echart.md b/website/docs/zh/guide/09-echart.md
new file mode 100644
index 0000000..017aeab
--- /dev/null
+++ b/website/docs/zh/guide/09-echart.md
@@ -0,0 +1,118 @@
+# 09 - echart图表无缝滚动
+
+<ClientOnly>
+<Example09Basic></Example09Basic>
+</ClientOnly>
+
+```vue
+<template>
+  <vue-seamless-scroll
+    :data="listData"
+    :class-option="classOption"
+    class="warp"
+  >
+    <ul class="ul-item">
+      <li class="li-item" v-for="(item, index) in listData" :key="index"></li>
+    </ul>
+  </vue-seamless-scroll>
+</template>
+
+<script>
+  import vueSeamlessScroll from 'vue-seamless-scroll'
+  import echarts from 'echarts'
+
+  export default {
+    name: 'Example09Basic',
+    components: {
+      vueSeamlessScroll
+    },
+    data () {
+      return {
+        listData: [1, 2, 3, 4, 5, 6],
+        classOption: {
+          limitMoveNum: 2,
+          direction: 3,
+        }
+      }
+    },
+    methods: {
+      drawChart (dom) {
+        const myChart = echarts.init(dom)
+        myChart.setOption({
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c} ({d}%)'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 10,
+            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+          },
+          series: [
+            {
+              name: '访问来源',
+              type: 'pie',
+              radius: ['50%', '70%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '30',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 335, name: '直接访问' },
+                { value: 310, name: '邮件营销' },
+                { value: 234, name: '联盟广告' },
+                { value: 135, name: '视频广告' },
+                { value: 1548, name: '搜索引擎' }
+              ]
+            }
+          ]
+        });
+      }
+    },
+    mounted () {
+      // echart渲染放到setTimeout宏任务,这时vue-seamless-scroll组件内部复制完成
+      setTimeout(() => {
+        document.querySelectorAll('.li-item').forEach(dom => {
+          this.drawChart(dom);
+        });
+      }, 0);
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .warp {
+    width: 240px * 3;
+    height: 210px;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      &.ul-item {
+        display: flex;
+        .li-item {
+          width: 240px;
+          height: 200px;
+          margin-right: 10px;
+          border: 1px solid #000;
+        }
+      }
+    }
+  }
+</style>
+
+```
+
diff --git a/website/docs/zh/guide/10-array-property-update.md b/website/docs/zh/guide/10-array-property-update.md
new file mode 100644
index 0000000..84bb965
--- /dev/null
+++ b/website/docs/zh/guide/10-array-property-update.md
@@ -0,0 +1,109 @@
+# 10 - 复杂结构数组属性更新问题
+
+<ClientOnly>
+<Example10Basic></Example10Basic>
+</ClientOnly>
+
+```vue
+<template>
+  <vue-seamless-scroll :data="listData" class="warp" ref="seamlessScroll">
+    <ul class="item">
+      <li v-for="(item, index) in listData" :key="index">
+        <span class="title" v-text="item.title"></span>
+        <span class="date" v-text="item.date"></span>
+      </li>
+    </ul>
+  </vue-seamless-scroll>
+</template>
+
+<script>
+  import vueSeamlessScroll from 'vue-seamless-scroll'
+
+  export default {
+    name: 'Example10Basic',
+    components: {
+      vueSeamlessScroll
+    },
+    data () {
+      return {
+        listData: [{
+          'title': '无缝滚动第一行无缝滚动第一行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第二行无缝滚动第二行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第三行无缝滚动第三行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第四行无缝滚动第四行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第五行无缝滚动第五行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第六行无缝滚动第六行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第七行无缝滚动第七行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第八行无缝滚动第八行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第九行无缝滚动第九行',
+          'date': '2017-12-16'
+        }],
+      }
+    },
+    mounted() {
+      setTimeout(() => {
+        this.listData[0] = {
+          title: '我的第一条的title，我被更新了。',
+          date: 'date1'
+        }
+        this.listData[1] = {
+          title: '我的第二条的title，我被更新了。',
+          date: 'date2'
+        }
+        this.listData[2] = {
+          title: '我的第三条的title，我被更新了。',
+          date: 'date3'
+        }
+        this.listData[3] = {
+          title: '我的第四条的title，我被更新了。',
+          date: 'date4'
+        }
+        this.listData.push()
+        // listData length无变化，仅仅是属性变更，手动调用下组件内部的reset方法
+        this.$refs.seamlessScroll.reset()
+      }, 2000);
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .warp {
+    height: 270px;
+    width: 360px;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      li,
+      a {
+        display: block;
+        height: 30px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 15px;
+      }
+    }
+  }
+</style>
+
+```
+
diff --git a/website/docs/zh/guide/11-array-length-update.md b/website/docs/zh/guide/11-array-length-update.md
new file mode 100644
index 0000000..cf31380
--- /dev/null
+++ b/website/docs/zh/guide/11-array-length-update.md
@@ -0,0 +1,109 @@
+# 11 - 滚动列表动态追加数据
+
+<ClientOnly>
+<Example11Basic></Example11Basic>
+</ClientOnly>
+
+```vue
+<template>
+  <vue-seamless-scroll :data="listData" class="warp" ref="seamlessScroll">
+    <ul class="item">
+      <li v-for="(item, index) in listData" :key="index">
+        <span class="title" v-text="item.title"></span>
+        <span class="date" v-text="item.date"></span>
+      </li>
+    </ul>
+  </vue-seamless-scroll>
+</template>
+
+<script>
+  import vueSeamlessScroll from 'vue-seamless-scroll'
+
+  export default {
+    name: 'Example10Basic',
+    components: {
+      vueSeamlessScroll
+    },
+    data () {
+      return {
+        listData: [{
+          'title': '无缝滚动第一行无缝滚动第一行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第二行无缝滚动第二行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第三行无缝滚动第三行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第四行无缝滚动第四行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第五行无缝滚动第五行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第六行无缝滚动第六行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第七行无缝滚动第七行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第八行无缝滚动第八行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第九行无缝滚动第九行',
+          'date': '2017-12-16'
+        }],
+      }
+    },
+    mounted() {
+      setTimeout(() => {
+        this.listData[0] = {
+          title: '我的第一条的title，我被更新了。',
+          date: 'date1'
+        }
+        this.listData[1] = {
+          title: '我的第二条的title，我被更新了。',
+          date: 'date2'
+        }
+        this.listData[2] = {
+          title: '我的第三条的title，我被更新了。',
+          date: 'date3'
+        }
+        this.listData[3] = {
+          title: '我的第四条的title，我被更新了。',
+          date: 'date4'
+        }
+        this.listData.push()
+        // listData length无变化，仅仅是属性变更，手动调用下组件内部的reset方法
+        this.$refs.seamlessScroll.reset()
+      }, 2000);
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .warp {
+    height: 270px;
+    width: 360px;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      li,
+      a {
+        display: block;
+        height: 30px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 15px;
+      }
+    }
+  }
+</style>
+
+```
+
diff --git a/website/package.json b/website/package.json
index 4464419..03e2210 100644
--- a/website/package.json
+++ b/website/package.json
@@ -6,15 +6,17 @@
   "license": "MIT",
   "private": false,
   "scripts": {
-    "docs:dev": "vuepress dev docs",
-    "docs:build": "vuepress build docs",
+    "docs:dev": "sudo vuepress dev docs",
+    "docs:build": "sudo vuepress build docs",
     "docs:deploy": "sudo ./deploy.sh"
   },
-  "dependencies": {},
+  "dependencies": {
+    "echarts": "^4.0.0",
+    "vue-seamless-scroll": "^1.1.21"
+  },
   "devDependencies": {
     "@vuepress/plugin-back-to-top": "^1.6.0",
     "@vuepress/plugin-google-analytics": "^1.6.0",
-    "vue-seamless-scroll": "^1.1.21",
     "vuepress-plugin-seo": "^0.1.4",
     "vuepress-plugin-sitemap": "^2.3.1",
     "vuepress": "^1.7.1",
diff --git a/website/public b/website/public
new file mode 160000
index 0000000..c3970aa
--- /dev/null
+++ b/website/public
@@ -0,0 +1 @@
+Subproject commit c3970aaeb0df10c8d4cececa73059fe164a3c6b1