@sswq2020/vue-carousel/dist/vue-carousel.umd.js

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.VueCarousel={},r.Vue))})(this,function(r,e){"use strict";function m(n=1){const t=e.ref(n);return{pageIndex:t,setPageIndex:c=>{t.value=c},prePage:()=>{t.value=t.value-1},nextPage:()=>{t.value=t.value+1}}}const i=e.defineComponent({name:"XCarouselIndicator",props:{modelValue:{type:Number},count:{type:Number}},emits:["update:modelValue"],setup(n,{emit:t,slots:o}){const{modelValue:l}=e.toRefs(n),{pageIndex:a,setPageIndex:c}=m(l.value),d=Array.from(new Array(n.count).keys());return e.watch(l,s=>{console.log("newVal",s),a.value=s}),e.watch(a,s=>{t("update:modelValue",s)}),()=>e.createVNode("div",{class:"x-carousel-indicator"},[o.default?o.default({pageIndex:a.value,setPageIndex:c}):d.map((s,f)=>e.createVNode("div",{class:`x-carousel-indicator-item${a.value===f+1?" active":""}`,onClick:()=>c(f+1)},null))])}}),g=(n,t)=>{const o=n.__vccOpts||n;for(const[l,a]of t)o[l]=a;return o},P={},N={width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},w=[e.createElementVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createElementVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"})],-1)];function k(n,t){return e.openBlock(),e.createElementBlock("svg",N,w)}const _=g(P,[["render",k]]),I={},C={width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},v=[e.createElementVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createElementVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"})],-1)];function $(n,t){return e.openBlock(),e.createElementBlock("svg",C,v)}const h=g(I,[["render",$]]);function B(n,t){let o;const l=()=>{o&&(clearTimeout(o),o=null),o=setTimeout(()=>{n(),l()},t)},a=()=>{o&&(clearTimeout(o),o=null)};return e.onUnmounted(()=>{a()}),{startPlay:l,stopPlay:a}}const p=e.defineComponent({name:"XCarousel",components:{XCarouselIndicator:i,Left:_,Right:h},props:{autoplay:{type:Boolean,default:!0}},setup(n,t){var V;const{autoplay:o}=e.toRefs(n),{pageIndex:l,prePage:a,nextPage:c,setPageIndex:d}=m(1),s=(V=e.useSlots())==null?void 0:V.default().length,f=()=>{l.value===1?d(s):a()},x=()=>{l.value===s?d(1):c()},{startPlay:X,stopPlay:E}=B(x,3e3),y=u=>{u?X():E()};return y(o.value),e.watch(o,u=>{y(u)}),()=>e.createVNode("div",{class:"x-carousel"},[e.createVNode("div",{class:"x-carousel-item-container",style:{width:s*100+"%",transform:`translateX(-${(l.value-1)*100/s}%)`}},[t.slots.default&&t.slots.default()]),e.createVNode("div",{class:"x-carousel-pagination"},[e.createVNode("span",{class:"arrow arrow-left",onClick:f},[t.slots.left?t.slots.left():e.createVNode(_,null,null)]),e.createVNode("span",{class:"arrow arrow-right",onClick:x},[t.slots.right?t.slots.right():e.createVNode(h,null,null)])]),t.slots.indicator?t.slots.indicator({count:s,pageIndex:l.value,setPageIndex:d}):e.createVNode(i,{count:s,modelValue:l.value,"onUpdate:modelValue":u=>l.value=u},null)])}}),T={install(n){n.component(p.name,p),n.component(i.name,i)}};r.XCarousel=p,r.XCarouselIndicator=i,r.default=T,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});