diff --git a/dist/style.css b/dist/style.css
index ac08c03..db2350b 100644
--- a/dist/style.css
+++ b/dist/style.css
@@ -1 +1 @@
-.misaka-carousel-container[data-v-0707d3bf]{width:100%;overflow:hidden;white-space:nowrap;position:relative;box-sizing:border-box}.misaka-carousel-container *[data-v-0707d3bf]{box-sizing:border-box}.misaka-carousel-container .misaka-carousel-wrapper[data-v-0707d3bf]{white-space:nowrap;width:auto;display:flex;flex-wrap:nowrap;position:relative;position:absolute;top:0px}.misaka-carousel-container .misaka-carousel-wrapper .misaka-carousel-item[data-v-0707d3bf]{flex:0 0 auto}
+.misaka-carousel-container[data-v-df0a0afa]{width:100%;overflow:hidden;white-space:nowrap;position:relative;box-sizing:border-box}.misaka-carousel-container *[data-v-df0a0afa]{box-sizing:border-box}.misaka-carousel-container .misaka-carousel-wrapper[data-v-df0a0afa]{white-space:nowrap;width:auto;display:flex;flex-wrap:nowrap;position:relative;position:absolute;top:0px}.misaka-carousel-container .misaka-carousel-wrapper .misaka-carousel-item[data-v-df0a0afa]{flex:0 0 auto}
diff --git a/dist/vue3-carousel-animate.es.js b/dist/vue3-carousel-animate.es.js
index 67287a3..c93d56b 100644
--- a/dist/vue3-carousel-animate.es.js
+++ b/dist/vue3-carousel-animate.es.js
@@ -239,7 +239,7 @@ const useSize = (offset, additionalSlides, reverse) => {
   };
   return { wrapperStyle, calcAllSize, resetWrapperStyle, computedSize };
 };
-var index_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".misaka-carousel-container[data-v-0707d3bf]{width:100%;overflow:hidden;white-space:nowrap;position:relative;box-sizing:border-box}.misaka-carousel-container *[data-v-0707d3bf]{box-sizing:border-box}.misaka-carousel-container .misaka-carousel-wrapper[data-v-0707d3bf]{white-space:nowrap;width:auto;display:flex;flex-wrap:nowrap;position:relative;position:absolute;top:0px}.misaka-carousel-container .misaka-carousel-wrapper .misaka-carousel-item[data-v-0707d3bf]{flex:0 0 auto}\n")();
+var index_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".misaka-carousel-container[data-v-df0a0afa]{width:100%;overflow:hidden;white-space:nowrap;position:relative;box-sizing:border-box}.misaka-carousel-container *[data-v-df0a0afa]{box-sizing:border-box}.misaka-carousel-container .misaka-carousel-wrapper[data-v-df0a0afa]{white-space:nowrap;width:auto;display:flex;flex-wrap:nowrap;position:relative;position:absolute;top:0px}.misaka-carousel-container .misaka-carousel-wrapper .misaka-carousel-item[data-v-df0a0afa]{flex:0 0 auto}\n")();
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -345,5 +345,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0707d3bf"]]);
-export { index as MisakaCarousel };
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-df0a0afa"]]);
+export { index as Vue3CarouselAnimate };
diff --git a/dist/vue3-carousel-animate.umd.js b/dist/vue3-carousel-animate.umd.js
index 84261dc..6f430bc 100644
--- a/dist/vue3-carousel-animate.umd.js
+++ b/dist/vue3-carousel-animate.umd.js
@@ -1,2 +1,2 @@
-(function(u,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis!="undefined"?globalThis:u||self,e(u["vue3-carousel-animate"]={},u.Vue))})(this,function(u,e){"use strict";var C=Object.defineProperty;var M=(u,e,v)=>e in u?C(u,e,{enumerable:!0,configurable:!0,writable:!0,value:v}):u[e]=v;var c=(u,e,v)=>(M(u,typeof e!="symbol"?e+"":e,v),v);const v=(s,t,i,n)=>{const a=()=>{if(t.value.offsetPx>0)console.log("==========offsetAnimate"),r();else if(t.value.offsetPx==0)console.log("==========restartAnimate"),f();else throw new Error("offset cannot be less than zero")},r=()=>{setTimeout(()=>{n.value?(s.value.transition=`transform ${i.value*(t.value.offsetPx/t.value.itemWidth)}ms linear`,s.value.transform=`translateX(${t.value.offsetPx}px)`):(s.value.transition=`transform ${i.value*(t.value.offsetPx/t.value.itemWidth)}ms linear`,s.value.transform=`translateX(-${t.value.offsetPx}px)`)},0)},f=async()=>{setTimeout(()=>{n.value?(s.value.transition=`transform ${i.value}ms linear`,s.value.transform=`translateX(${t.value.offsetPx+t.value.itemWidth}px)`):(s.value.transition=`transform ${i.value}ms linear`,s.value.transform=`translateX(-${t.value.offsetPx+t.value.itemWidth}px)`)},0)};return{start:a,offsetAnimate:r,restartAnimate:f,toOrigin:()=>{n.value?(s.value.transition="transform 0ms linear",s.value.transform=`translateX(${t.value.offsetPx}px)`):(s.value.transition="transform 0ms linear",s.value.transform=`translateX(-${t.value.offsetPx}px)`)}}};class g{constructor(){c(this,"x0",0);c(this,"x1",300);c(this,"totalTime",3e3);c(this,"x",0);c(this,"currentTime",0);c(this,"startTime");c(this,"isActive",!1);c(this,"callback",t=>{});c(this,"animate",async()=>(this.isActive=!0,new Promise(async(t,i)=>{const n=async a=>{if(this.isActive===!1){console.log("==========FPSAnimate is set isAnimating finished"),i(this.x);return}this.startTime===void 0&&(this.startTime=a);const f=(a-this.startTime)/this.totalTime;this.x=Math.round(this.x0+(this.x1-this.x0)*f),Math.abs(this.x-this.x0)>=Math.abs(this.x1-this.x0)?(this.x=this.x1,this.callback(this.x),t(this.x)):(this.callback(this.x),window.requestAnimationFrame(n))};window.requestAnimationFrame(n)})));c(this,"init",({x0:t=0,x1:i=300,totalTime:n=3e3,x:a=0,currentTime:r=0,startTime:f=void 0})=>{this.x0=t,this.x1=i,this.totalTime=n,this.x=a,this.currentTime=r,this.startTime=f})}}c(g,"getFrameTime",async()=>(console.log("==========getFrameTime start"),new Promise((t,i)=>{window.requestAnimationFrame(n=>{window.requestAnimationFrame(a=>{t(a-n)})})})));let o=new g;const A=(s,t,i,n)=>{const a=async()=>{o.isActive&&(o.isActive=!1),o=new g,o.init({x0:0,x1:-t.value.offsetPx,totalTime:i.value*(t.value.offsetPx/t.value.itemWidth)}),o.callback=l=>{s.value.transform=`translateX(${l}px)`},console.log("==========start ani",o);try{await o.animate()}catch(l){console.log("==========\u52A8\u753B\u5F3A\u5236\u505C\u6B62",l);return}console.log("==========end ani"),r()},r=async()=>{o.init({x0:-t.value.offsetPx,x1:-t.value.offsetPx-t.value.itemWidth,totalTime:i.value}),o.callback=l=>{s.value.transform=`translateX(${l}px)`};try{await o.animate()}catch(l){console.log("==========\u52A8\u753B\u5F3A\u5236\u505C\u6B62",l);return}r()};return{start:a,pause:async l=>{if(console.log("==========pause fps animate",l),o.isActive=!1,l){console.log("==========",o.x);return}console.log("==========pause\u7ED3\u675F\u6682\u505C");let m=o.x;o=new g;let d=1-Math.abs(m)/(t.value.offsetPx+t.value.itemWidth);console.log("==========ratio",d),o.init({x0:m,x1:-t.value.offsetPx-t.value.itemWidth,totalTime:i.value*d}),o.callback=h=>{s.value.transform=`translateX(${h}px)`},console.log("==========start ani",o);try{await o.animate()}catch(h){console.log("==========\u52A8\u753B\u5F3A\u5236\u505C\u6B62",h);return}console.log("==========end ani"),r()}}},P=(s,t,i)=>{const n=e.ref({transition:"",transform:"",left:s.value,right:"",width:""}),a=e.ref({containerHeight:0,wrapperWidth:0,containerWidth:0,itemWidth:0,offsetPx:0}),r=async(l,m)=>{if(!l.value||!m.value)return;f(),await e.nextTick(),a.value.containerWidth=l.value.getBoundingClientRect().width,a.value.containerHeight=m.value.getBoundingClientRect().height;let d=m.value.querySelector(".misaka-carousel-item");a.value.itemWidth=d.getBoundingClientRect().width,a.value.wrapperWidth=a.value.itemWidth*(t.value+1),n.value.width=`${a.value.wrapperWidth}px`,a.value.offsetPx=m.value.offsetLeft,console.log("==========wrapper.value.offsetLeft",m.value.offsetLeft),n.value.left=i.value?"":`${a.value.offsetPx}px`,n.value.right=i.value?`${a.value.offsetPx}px`:""},f=()=>{n.value={transition:"",transform:"",left:s.value,right:"",width:""}};return{wrapperStyle:n,calcAllSize:r,resetWrapperStyle:f,computedSize:a}};var X=(()=>`.misaka-carousel-container[data-v-0707d3bf]{width:100%;overflow:hidden;white-space:nowrap;position:relative;box-sizing:border-box}.misaka-carousel-container *[data-v-0707d3bf]{box-sizing:border-box}.misaka-carousel-container .misaka-carousel-wrapper[data-v-0707d3bf]{white-space:nowrap;width:auto;display:flex;flex-wrap:nowrap;position:relative;position:absolute;top:0px}.misaka-carousel-container .misaka-carousel-wrapper .misaka-carousel-item[data-v-0707d3bf]{flex:0 0 auto}
-`)(),T=(s,t)=>{const i=s.__vccOpts||s;for(const[n,a]of t)i[n]=a;return i},$=T(e.defineComponent({__name:"index",props:{additionalSlides:{type:Number,default:3},itemRight:{type:String,default:"0px"},speed:{type:Number,default:3e3},offset:{type:String,default:"0px"},reverse:{type:Boolean,default:!1},mode:{type:String,default:"css"}},setup(s,{expose:t}){const i=s,n=e.ref(),a=e.ref(),{additionalSlides:r,itemRight:f,speed:l,offset:m,reverse:d,mode:h}=e.toRefs(i),{wrapperStyle:y,calcAllSize:W,computedSize:p}=P(m,r,d),k=v(y,p,l,d),b=A(y,p,l),w=e.ref(!1);e.onMounted(async()=>{_()});const _=async()=>{w.value=!1,await W(n,a),console.log("==========size",p.value),w.value=!0,h.value==="css"?(console.log("==========css mode"),k.start()):(console.log("==========fps mode"),b.start())},B=x=>{console.log("==========end handle ",x),h.value==="css"&&x.propertyName==="transform"&&(console.log("\u91CD\u542F"),k.toOrigin(),k.restartAnimate())};return t({start:_,pause:x=>{b.pause(x)}}),(x,E)=>(e.openBlock(),e.createElementBlock("div",{class:"misaka-carousel-container",ref_key:"container",ref:n,style:e.normalizeStyle([{opacity:w.value?"1":"0"},{height:`${e.unref(p).containerHeight}px`}])},[e.createElementVNode("div",{style:e.normalizeStyle(e.unref(y)),class:"misaka-carousel-wrapper",ref_key:"wrapper",ref:a,onTransitionend:B},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r)+1,(L,F)=>(e.openBlock(),e.createElementBlock("div",{class:"misaka-carousel-item",key:F,style:e.normalizeStyle([{paddingRight:`${e.unref(f)}`}])},[e.renderSlot(x.$slots,"default",{},void 0,!0)],4))),128))],36)],4))}}),[["__scopeId","data-v-0707d3bf"]]);u.MisakaCarousel=$,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(u,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis!="undefined"?globalThis:u||self,e(u["vue3-carousel-animate"]={},u.Vue))})(this,function(u,e){"use strict";var C=Object.defineProperty;var X=(u,e,v)=>e in u?C(u,e,{enumerable:!0,configurable:!0,writable:!0,value:v}):u[e]=v;var c=(u,e,v)=>(X(u,typeof e!="symbol"?e+"":e,v),v);const v=(s,t,i,n)=>{const a=()=>{if(t.value.offsetPx>0)console.log("==========offsetAnimate"),r();else if(t.value.offsetPx==0)console.log("==========restartAnimate"),f();else throw new Error("offset cannot be less than zero")},r=()=>{setTimeout(()=>{n.value?(s.value.transition=`transform ${i.value*(t.value.offsetPx/t.value.itemWidth)}ms linear`,s.value.transform=`translateX(${t.value.offsetPx}px)`):(s.value.transition=`transform ${i.value*(t.value.offsetPx/t.value.itemWidth)}ms linear`,s.value.transform=`translateX(-${t.value.offsetPx}px)`)},0)},f=async()=>{setTimeout(()=>{n.value?(s.value.transition=`transform ${i.value}ms linear`,s.value.transform=`translateX(${t.value.offsetPx+t.value.itemWidth}px)`):(s.value.transition=`transform ${i.value}ms linear`,s.value.transform=`translateX(-${t.value.offsetPx+t.value.itemWidth}px)`)},0)};return{start:a,offsetAnimate:r,restartAnimate:f,toOrigin:()=>{n.value?(s.value.transition="transform 0ms linear",s.value.transform=`translateX(${t.value.offsetPx}px)`):(s.value.transition="transform 0ms linear",s.value.transform=`translateX(-${t.value.offsetPx}px)`)}}};class g{constructor(){c(this,"x0",0);c(this,"x1",300);c(this,"totalTime",3e3);c(this,"x",0);c(this,"currentTime",0);c(this,"startTime");c(this,"isActive",!1);c(this,"callback",t=>{});c(this,"animate",async()=>(this.isActive=!0,new Promise(async(t,i)=>{const n=async a=>{if(this.isActive===!1){console.log("==========FPSAnimate is set isAnimating finished"),i(this.x);return}this.startTime===void 0&&(this.startTime=a);const f=(a-this.startTime)/this.totalTime;this.x=Math.round(this.x0+(this.x1-this.x0)*f),Math.abs(this.x-this.x0)>=Math.abs(this.x1-this.x0)?(this.x=this.x1,this.callback(this.x),t(this.x)):(this.callback(this.x),window.requestAnimationFrame(n))};window.requestAnimationFrame(n)})));c(this,"init",({x0:t=0,x1:i=300,totalTime:n=3e3,x:a=0,currentTime:r=0,startTime:f=void 0})=>{this.x0=t,this.x1=i,this.totalTime=n,this.x=a,this.currentTime=r,this.startTime=f})}}c(g,"getFrameTime",async()=>(console.log("==========getFrameTime start"),new Promise((t,i)=>{window.requestAnimationFrame(n=>{window.requestAnimationFrame(a=>{t(a-n)})})})));let o=new g;const P=(s,t,i,n)=>{const a=async()=>{o.isActive&&(o.isActive=!1),o=new g,o.init({x0:0,x1:-t.value.offsetPx,totalTime:i.value*(t.value.offsetPx/t.value.itemWidth)}),o.callback=l=>{s.value.transform=`translateX(${l}px)`},console.log("==========start ani",o);try{await o.animate()}catch(l){console.log("==========\u52A8\u753B\u5F3A\u5236\u505C\u6B62",l);return}console.log("==========end ani"),r()},r=async()=>{o.init({x0:-t.value.offsetPx,x1:-t.value.offsetPx-t.value.itemWidth,totalTime:i.value}),o.callback=l=>{s.value.transform=`translateX(${l}px)`};try{await o.animate()}catch(l){console.log("==========\u52A8\u753B\u5F3A\u5236\u505C\u6B62",l);return}r()};return{start:a,pause:async l=>{if(console.log("==========pause fps animate",l),o.isActive=!1,l){console.log("==========",o.x);return}console.log("==========pause\u7ED3\u675F\u6682\u505C");let m=o.x;o=new g;let d=1-Math.abs(m)/(t.value.offsetPx+t.value.itemWidth);console.log("==========ratio",d),o.init({x0:m,x1:-t.value.offsetPx-t.value.itemWidth,totalTime:i.value*d}),o.callback=h=>{s.value.transform=`translateX(${h}px)`},console.log("==========start ani",o);try{await o.animate()}catch(h){console.log("==========\u52A8\u753B\u5F3A\u5236\u505C\u6B62",h);return}console.log("==========end ani"),r()}}},T=(s,t,i)=>{const n=e.ref({transition:"",transform:"",left:s.value,right:"",width:""}),a=e.ref({containerHeight:0,wrapperWidth:0,containerWidth:0,itemWidth:0,offsetPx:0}),r=async(l,m)=>{if(!l.value||!m.value)return;f(),await e.nextTick(),a.value.containerWidth=l.value.getBoundingClientRect().width,a.value.containerHeight=m.value.getBoundingClientRect().height;let d=m.value.querySelector(".misaka-carousel-item");a.value.itemWidth=d.getBoundingClientRect().width,a.value.wrapperWidth=a.value.itemWidth*(t.value+1),n.value.width=`${a.value.wrapperWidth}px`,a.value.offsetPx=m.value.offsetLeft,console.log("==========wrapper.value.offsetLeft",m.value.offsetLeft),n.value.left=i.value?"":`${a.value.offsetPx}px`,n.value.right=i.value?`${a.value.offsetPx}px`:""},f=()=>{n.value={transition:"",transform:"",left:s.value,right:"",width:""}};return{wrapperStyle:n,calcAllSize:r,resetWrapperStyle:f,computedSize:a}};var M=(()=>`.misaka-carousel-container[data-v-df0a0afa]{width:100%;overflow:hidden;white-space:nowrap;position:relative;box-sizing:border-box}.misaka-carousel-container *[data-v-df0a0afa]{box-sizing:border-box}.misaka-carousel-container .misaka-carousel-wrapper[data-v-df0a0afa]{white-space:nowrap;width:auto;display:flex;flex-wrap:nowrap;position:relative;position:absolute;top:0px}.misaka-carousel-container .misaka-carousel-wrapper .misaka-carousel-item[data-v-df0a0afa]{flex:0 0 auto}
+`)(),b=(s,t)=>{const i=s.__vccOpts||s;for(const[n,a]of t)i[n]=a;return i},$=b(e.defineComponent({__name:"index",props:{additionalSlides:{type:Number,default:3},itemRight:{type:String,default:"0px"},speed:{type:Number,default:3e3},offset:{type:String,default:"0px"},reverse:{type:Boolean,default:!1},mode:{type:String,default:"css"}},setup(s,{expose:t}){const i=s,n=e.ref(),a=e.ref(),{additionalSlides:r,itemRight:f,speed:l,offset:m,reverse:d,mode:h}=e.toRefs(i),{wrapperStyle:y,calcAllSize:W,computedSize:p}=T(m,r,d),k=v(y,p,l,d),A=P(y,p,l),w=e.ref(!1);e.onMounted(async()=>{_()});const _=async()=>{w.value=!1,await W(n,a),console.log("==========size",p.value),w.value=!0,h.value==="css"?(console.log("==========css mode"),k.start()):(console.log("==========fps mode"),A.start())},B=x=>{console.log("==========end handle ",x),h.value==="css"&&x.propertyName==="transform"&&(console.log("\u91CD\u542F"),k.toOrigin(),k.restartAnimate())};return t({start:_,pause:x=>{A.pause(x)}}),(x,E)=>(e.openBlock(),e.createElementBlock("div",{class:"misaka-carousel-container",ref_key:"container",ref:n,style:e.normalizeStyle([{opacity:w.value?"1":"0"},{height:`${e.unref(p).containerHeight}px`}])},[e.createElementVNode("div",{style:e.normalizeStyle(e.unref(y)),class:"misaka-carousel-wrapper",ref_key:"wrapper",ref:a,onTransitionend:B},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r)+1,(L,F)=>(e.openBlock(),e.createElementBlock("div",{class:"misaka-carousel-item",key:F,style:e.normalizeStyle([{paddingRight:`${e.unref(f)}`}])},[e.renderSlot(x.$slots,"default",{},void 0,!0)],4))),128))],36)],4))}}),[["__scopeId","data-v-df0a0afa"]]);u.Vue3CarouselAnimate=$,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});