@tofandel/vue3-carousel/dist/carousel.min.js

A simple carousel component for Vue 3

/**
 * Vue 3 Carousel 0.15.6
 * (c) 2025
 * @license MIT
 */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueCarousel={},e.Vue)}(this,(function(e,t){"use strict";const a=["viewport","carousel"],l={"bottom-to-top":"btt","left-to-right":"ltr","right-to-left":"rtl","top-to-bottom":"ttb"},n=["ltr","left-to-right","rtl","right-to-left","ttb","top-to-bottom","btt","bottom-to-top"],i={ariaGallery:"Gallery",ariaNavigateToPage:"Navigate to page {slideNumber}",ariaNavigateToSlide:"Navigate to slide {slideNumber}",ariaNextSlide:"Navigate to next slide",ariaPreviousSlide:"Navigate to previous slide",iconArrowDown:"Arrow pointing downwards",iconArrowLeft:"Arrow pointing to the left",iconArrowRight:"Arrow pointing to the right",iconArrowUp:"Arrow pointing upwards",itemXofY:"Item {currentSlide} of {slidesCount}"},o=Object.values(l),r=["slide","fade"],u=["center","start","end","center-even","center-odd"],s=.08,d={autoplay:0,breakpointMode:a[0],breakpoints:void 0,dir:n[0],enabled:!0,gap:0,height:"auto",i18n:i,ignoreAnimations:!1,itemsToScroll:1,itemsToShow:1,modelValue:0,mouseDrag:!0,mouseWheel:!1,pauseAutoplayOnHover:!1,preventExcessiveDragging:!1,slideEffect:r[0],snapAlign:u[0],touchDrag:!0,transition:300,wrapAround:!1},c=Symbol("carousel"),v=e=>{const a=t.shallowReactive([]),l=e=>{void 0!==e?a.slice(e).forEach(((t,a)=>{var l;null===(l=t.exposed)||void 0===l||l.setIndex(e+a)})):a.forEach(((e,t)=>{var a;null===(a=e.exposed)||void 0===a||a.setIndex(t)}))};return{cleanup:()=>{a.splice(0,a.length)},getSlides:()=>a,registerSlide:(t,n)=>{if(!t)return;if(t.props.isClone)return;const i=null!=n?n:a.length;a.splice(i,0,t),l(i),e("slide-registered",{slide:t,index:i})},unregisterSlide:t=>{const n=a.indexOf(t);-1!==n&&(e("slide-unregistered",{slide:t,index:n}),a.splice(n,1),l(n))}}};function p({slides:e,position:a,toShow:l}){const n=[],i="before"===a,o=i?-l:0,r=i?0:l;if(e.length<=0)return n;for(let l=o;l<r;l++){const o={index:i?l:l+e.length,isClone:!0,id:void 0,key:`clone-${a}-${l}`},r=e[(l%e.length+e.length)%e.length].vnode,u=t.cloneVNode(r,o);u.el=null,n.push(u)}return n}function g(e){if(!(e.el&&e.el instanceof Element))return;const t=e.el.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');for(const e of t)e instanceof HTMLElement&&!e.hasAttribute("disabled")&&"true"!==e.getAttribute("aria-hidden")&&e.setAttribute("tabindex","-1")}function m({val:e,max:t,min:a}){return t<a?e:Math.min(Math.max(e,isNaN(a)?e:a),isNaN(t)?e:t)}function h(e){let t=1,a=1;return e.forEach((e=>{const l=function(e){const{transform:t}=window.getComputedStyle(e);return t.split(/[(,)]/).slice(1,-1).map((e=>parseFloat(e)))}(e);6===l.length&&(t/=l[0],a/=l[3])})),{widthMultiplier:t,heightMultiplier:a}}function f({slideSize:e,viewportSize:t,align:a,itemsToShow:l}){return void 0!==l?function(e,t){switch(e){case"start":default:return 0;case"center":case"center-odd":return(t-1)/2;case"center-even":return(t-2)/2;case"end":return t-1}}(a,l):void 0!==e&&void 0!==t?function(e,t,a){switch(e){case"start":default:return 0;case"center":case"center-odd":return(a-t)/2;case"center-even":return a/2-t;case"end":return a-t}}(a,e,t):0}function b(e="",t={}){return Object.entries(t).reduce(((e,[t,a])=>e.replace(`{${t}}`,String(a))),e)}function w({val:e,max:t,min:a=0}){const l=t-a+1;return((e-a)%l+l)%l+a}function S(e,t=0){let a=!1,l=0,n=null;function i(...i){if(a)return;a=!0;const o=()=>{n=requestAnimationFrame((n=>{n-l>t?(l=n,e(...i),a=!1):o()}))};o()}return i.cancel=()=>{n&&(cancelAnimationFrame(n),n=null,a=!1)},i}function y(e,t="px"){if(null!=e&&""!==e)return"number"==typeof e||parseFloat(e).toString()===e?`${e}${t}`:e}const x=t.defineComponent({name:"CarouselAria",setup(){const e=t.inject(c);return e?()=>t.h("div",{class:["carousel__liveregion","carousel__sr-only"],"aria-live":"polite","aria-atomic":"true"},b(e.config.i18n.itemXofY,{currentSlide:e.currentSlide+1,slidesCount:e.slidesCount})):()=>""}});const A={autoplay:{default:d.autoplay,type:Number},breakpoints:{default:d.breakpoints,type:Object},breakpointMode:{default:d.breakpointMode,validator:e=>a.includes(e)},clamp:{type:Boolean},dir:{type:String,default:d.dir,validator(e,t){if(!n.includes(e))return!1;return!["ttb","btt"].includes(e in l?l[e]:e)||t.height&&"auto"!==t.height||console.warn(`[vue3-carousel]: The dir "${e}" is not supported with height "auto".`),!0}},enabled:{default:d.enabled,type:Boolean},gap:{default:d.gap,type:Number},height:{default:d.height,type:[Number,String]},i18n:{default:d.i18n,type:Object},ignoreAnimations:{default:!1,type:[Array,Boolean,String]},itemsToScroll:{default:d.itemsToScroll,type:Number},itemsToShow:{default:d.itemsToShow,type:[Number,String]},modelValue:{default:void 0,type:Number},mouseDrag:{default:d.mouseDrag,type:[Boolean,Object]},mouseWheel:{default:d.mouseWheel,type:[Boolean,Object]},mouseScrollThreshold:{default:d.mouseScrollThreshold,type:Number},pauseAutoplayOnHover:{default:d.pauseAutoplayOnHover,type:Boolean},preventExcessiveDragging:{default:!1,type:Boolean,validator:(e,t)=>(e&&t.wrapAround&&console.warn('[vue3-carousel]: "preventExcessiveDragging" cannot be used with wrapAround. The setting will be ignored.'),!0)},slideEffect:{type:String,default:d.slideEffect,validator:e=>r.includes(e)},snapAlign:{default:d.snapAlign,validator:e=>u.includes(e)},touchDrag:{default:d.touchDrag,type:[Boolean,Object]},transition:{default:d.transition,type:Number},wrapAround:{default:d.wrapAround,type:Boolean}},T=t.defineComponent({name:"VueCarousel",props:A,emits:["before-init","drag","init","loop","slide-end","slide-registered","slide-start","slide-unregistered","update:modelValue","wheel"],setup(e,{slots:a,emit:n,expose:i}){var o;const r=v(n),u=r.getSlides(),g=t.computed((()=>u.length)),b=t.ref(null),A=t.ref(null),T=t.ref(0),_=t.computed((()=>{return Object.assign(Object.assign(Object.assign({},d),(t=e,a=["breakpoints","modelValue"],Object.keys(t).filter((e=>!a.includes(e))).reduce(((e,a)=>(e[a]=t[a],e)),{}))),{i18n:Object.assign(Object.assign({},d.i18n),e.i18n)});var t,a})),N=t.shallowReactive(Object.assign({},_.value)),D=t.ref(null!==(o=e.modelValue)&&void 0!==o?o:0),E=t.ref(D.value);t.watch(D,(e=>E.value=e));const M=t.ref(0),C=t.computed((()=>Math.ceil((g.value-1)/2))),O=t.computed((()=>g.value-1)),L=t.computed((()=>0));let j=null,I=null,R=null;const k=t.computed((()=>T.value+N.gap)),B=t.computed((()=>{const e=N.dir||"ltr";return e in l?l[e]:e})),F=t.computed((()=>["rtl","btt"].includes(B.value))),z=t.computed((()=>["ttb","btt"].includes(B.value))),P=t.computed((()=>"auto"===N.itemsToShow)),U=t.computed((()=>z.value?"height":"width"));function V(){var t;if(!Q.value)return;const a=("carousel"===_.value.breakpointMode?null===(t=b.value)||void 0===t?void 0:t.getBoundingClientRect().width:"undefined"!=typeof window?window.innerWidth:0)||0,l=Object.keys(e.breakpoints||{}).map((e=>Number(e))).sort(((e,t)=>+t-+e)),n={};l.some((t=>a>=t&&(Object.assign(n,e.breakpoints[t]),n.i18n&&Object.assign(n.i18n,_.value.i18n,e.breakpoints[t].i18n),!0))),Object.assign(N,_.value,n),P.value||(N.itemsToShow=m({val:Number(N.itemsToShow),max:e.clamp?g.value:1/0,min:1}))}const X=S((()=>{V(),G(),H()})),Y=t.shallowReactive(new Set),W=t.ref([]);const $=t.ref({width:0,height:0});function H(){if(!A.value)return;const e=h(Y);if(function({widthMultiplier:e,heightMultiplier:t}){var a;const l=(null===(a=A.value)||void 0===a?void 0:a.getBoundingClientRect())||{width:0,height:0};$.value={width:l.width*e,height:l.height*t}}(e),function({widthMultiplier:e,heightMultiplier:t}){W.value=u.map((a=>{var l;const n=null===(l=a.exposed)||void 0===l?void 0:l.getBoundingRect();return{width:n.width*e,height:n.height*t}}))}(e),P.value)T.value=0===(t=W.value.map((e=>e[U.value]))).length?0:t.reduce(((e,t)=>e+t),0)/t.length;else{const e=Number(N.itemsToShow),t=(e-1)*N.gap;T.value=($.value[U.value]-t)/e}var t}function G(){!N.wrapAround&&g.value>0&&(D.value=m({val:D.value,max:O.value,min:L.value}))}const q=t.computed((()=>"string"==typeof e.ignoreAnimations?e.ignoreAnimations.split(","):Array.isArray(e.ignoreAnimations)?e.ignoreAnimations:!e.ignoreAnimations&&[]));let K;t.watchEffect((()=>G())),t.watchEffect((()=>{H()}));const Z=e=>{const t=e.target;if(!(!(null==t?void 0:t.contains(b.value))||Array.isArray(q.value)&&q.value.includes(e.animationName)||(Y.add(t),K))){const e=()=>{K=requestAnimationFrame((()=>{H(),e()}))};e()}},J=e=>{const t=e.target;t&&Y.delete(t),K&&0===Y.size&&(cancelAnimationFrame(K),H())},Q=t.ref(!1);"undefined"!=typeof document&&t.watchEffect((()=>{Q.value&&!1!==q.value?(document.addEventListener("animationstart",Z),document.addEventListener("animationend",J)):(document.removeEventListener("animationstart",Z),document.removeEventListener("animationend",J))})),t.onMounted((()=>{Q.value=!0,V(),oe(),b.value&&(R=new ResizeObserver(X),R.observe(b.value)),n("init")})),t.onBeforeUnmount((()=>{Q.value=!1,r.cleanup(),I&&clearTimeout(I),K&&cancelAnimationFrame(K),j&&clearInterval(j),R&&(R.disconnect(),R=null),"undefined"!=typeof document&&ne(),b.value&&(b.value.removeEventListener("transitionend",H),b.value.removeEventListener("animationiteration",H))}));const{isHover:ee,handleMouseEnter:te,handleMouseLeave:ae}=function(){const e=t.ref(!1);return{isHover:e,handleMouseEnter:()=>{e.value=!0},handleMouseLeave:()=>{e.value=!1}}}(),le=S((e=>{if(!e.ctrlKey)switch(e.key){case"ArrowLeft":case"ArrowUp":z.value===e.key.endsWith("Up")&&(F.value?ge(!0):me(!0));break;case"ArrowRight":case"ArrowDown":z.value===e.key.endsWith("Down")&&(F.value?me(!0):ge(!0))}}),200),ne=()=>{document.removeEventListener("keydown",le)},ie=()=>{document.addEventListener("keydown",le)};function oe(){!N.autoplay||N.autoplay<=0||(j=setInterval((()=>{N.pauseAutoplayOnHover&&ee.value||ge()}),N.autoplay))}function re(){ue(),oe()}function ue(){j&&(clearInterval(j),j=null)}const se=t.ref(!1),{dragged:de,isDragging:ce,handleDragStart:ve}=function(e){let a=!1;const l={x:0,y:0},n=t.reactive({x:0,y:0}),i=t.ref(!1),{isSliding:o}=e,r=t.computed((()=>"boolean"==typeof o?o:o.value)),u=S((t=>{var o;if(a&&t.touches.length>1)return;i.value=!0;const r=a?t.touches[0].clientX:t.clientX,u=a?t.touches[0].clientY:t.clientY;n.x=r-l.x,n.y=u-l.y,null===(o=e.onDrag)||void 0===o||o.call(e,{deltaX:n.x,deltaY:n.y,isTouch:a})})),s=()=>{var t;u.cancel();const l=Math.abs(n.x)+Math.abs(n.y);!a&&l>10&&window.addEventListener("click",(e=>{e.preventDefault(),e.stopPropagation()}),{once:!0,capture:!0}),null===(t=e.onDragEnd)||void 0===t||t.call(e),n.x=0,n.y=0,i.value=!1;const o=a?"touchmove":"mousemove",r=a?"touchend":"mouseup";document.removeEventListener(o,u),document.removeEventListener(r,s)};return{dragged:n,isDragging:i,handleDragStart:t=>{var n;const i=t.target.tagName;if(["INPUT","TEXTAREA","SELECT"].includes(i)||r.value)return;if(a="touchstart"===t.type,a&&t.touches.length>1)return;if(!a&&(t.preventDefault(),0!==t.button))return;l.x=a?t.touches[0].clientX:t.clientX,l.y=a?t.touches[0].clientY:t.clientY;const o=a?"touchmove":"mousemove",d=a?"touchend":"mouseup";document.addEventListener(o,u,{passive:!1}),document.addEventListener(d,s,{passive:!0}),null===(n=e.onDragStart)||void 0===n||n.call(e)}}}({isSliding:se,onDrag:({deltaX:e,deltaY:t,isTouch:a})=>{var l,i,o,r;n("drag",{deltaX:e,deltaY:t});const u=a?"object"==typeof N.touchDrag&&null!==(i=null===(l=N.touchDrag)||void 0===l?void 0:l.threshold)&&void 0!==i?i:s:"object"==typeof N.mouseDrag&&null!==(r=null===(o=N.mouseDrag)||void 0===o?void 0:o.threshold)&&void 0!==r?r:s;if(0===k.value&&H(),0===k.value)return;const d=function(e){const{isVertical:t,isReversed:a,dragged:l,effectiveSlideSize:n,threshold:i}=e,o=t?l.y:l.x;if(0===o)return 0;const r=o/n,u=Math.abs(r);if(u<i)return 0;const s=u<1?Math.sign(r):Math.round(r);return a?s:-s}({isVertical:z.value,isReversed:F.value,dragged:{x:e,y:t},effectiveSlideSize:k.value,threshold:u});0!==d&&(E.value=N.wrapAround?D.value+d:m({val:D.value+d,max:O.value,min:L.value}))},onDragEnd:()=>he(E.value)}),{handleScroll:pe}=function(e){const{isVertical:a,isSliding:l,config:n}=e,i=t.computed((()=>"boolean"==typeof a?a:a.value)),o=t.computed((()=>"boolean"==typeof l?l:l.value));return{handleScroll:t=>{var a,l;if(t.preventDefault(),!n.mouseWheel||o.value)return;const r="object"==typeof n.mouseWheel&&null!==(a=n.mouseWheel.threshold)&&void 0!==a?a:10,u=Math.abs(t.deltaY)>r?t.deltaY:0,s=Math.abs(t.deltaX)>r?t.deltaX:0;if(0===u&&0===s)return;const d=i.value?u:s,c=(0!==d?d:i.value?s:u)>0;null===(l=e.onWheel)||void 0===l||l.call(e,{deltaX:s,deltaY:u,isScrollingForward:c})}}}({isVertical:z,isSliding:se,config:N,onWheel:({deltaX:e,deltaY:t,isScrollingForward:a})=>{n("wheel",{deltaX:e,deltaY:t}),a?F.value?me():ge():F.value?ge():me()}});function ge(e=!1){he(D.value+N.itemsToScroll,e)}function me(e=!1){he(D.value-N.itemsToScroll,e)}function he(e,t=!1){if(!t&&se.value)return;const a=(N.wrapAround?w:m)({val:e,max:O.value,min:L.value});if(D.value===a)return;M.value=D.value,n("slide-start",{slidingToIndex:e,currentSlideIndex:D.value,prevSlideIndex:M.value,slidesCount:g.value}),ue(),se.value=!0,D.value=e,a!==e&&fe.pause(),n("update:modelValue",a);I=setTimeout((()=>{N.wrapAround&&a!==e&&(fe.resume(),D.value=a,n("loop",{currentSlideIndex:D.value,slidingToIndex:e})),n("slide-end",{currentSlideIndex:D.value,prevSlideIndex:M.value,slidesCount:g.value}),se.value=!1,re()}),N.transition)}t.watch((()=>[_.value,e.breakpoints]),(()=>V()),{deep:!0}),t.watch((()=>e.autoplay),(()=>re()));const fe=t.watch((()=>e.modelValue),(e=>{e!==D.value&&he(Number(e),!0)}));n("before-init");const be=t.computed((()=>{if(!N.wrapAround)return{before:0,after:0};if(P.value)return{before:u.length,after:u.length};const e=Number(N.itemsToShow),t=Math.ceil(e+(N.itemsToScroll-1)),a=t-E.value,l=t-(g.value-(E.value+1));return{before:Math.max(0,a),after:Math.max(0,l)}})),we=t.computed((()=>be.value.before?P.value?-1*W.value.slice(-1*be.value.before).reduce(((e,t)=>e+t[U.value]+N.gap),0):be.value.before*k.value*-1:0)),Se=t.computed((()=>{var e;if(P.value){const t=(D.value%u.length+u.length)%u.length;return f({slideSize:null===(e=W.value[t])||void 0===e?void 0:e[U.value],viewportSize:$.value[U.value],align:N.snapAlign})}return f({align:N.snapAlign,itemsToShow:+N.itemsToShow})})),ye=t.computed((()=>{let e=0;if(P.value){if(e=D.value<0?-1*W.value.slice(D.value).reduce(((e,t)=>e+t[U.value]+N.gap),0):W.value.slice(0,D.value).reduce(((e,t)=>e+t[U.value]+N.gap),0),e-=Se.value,!N.wrapAround){e=m({val:e,max:W.value.reduce(((e,t)=>e+t[U.value]+N.gap),0)-$.value[U.value]-N.gap,min:0})}}else{let t=D.value-Se.value;N.wrapAround||(t=m({val:t,max:g.value-+N.itemsToShow,min:0})),e=t*k.value}return e*(F.value?1:-1)})),xe=t.computed((()=>{var e,t;if(!P.value){const e=D.value-Se.value;return N.wrapAround?{min:Math.floor(e),max:Math.ceil(e+Number(N.itemsToShow)-1)}:{min:Math.floor(m({val:e,max:g.value-Number(N.itemsToShow),min:0})),max:Math.ceil(m({val:e+Number(N.itemsToShow)-1,max:g.value-1,min:0}))}}let a=0;{let t=0,l=0-be.value.before;const n=Math.abs(ye.value+we.value);for(;t<=n;){const a=(l%u.length+u.length)%u.length;t+=(null===(e=W.value[a])||void 0===e?void 0:e[U.value])+N.gap,l++}a=l-1}let l=0;{let e=a,n=0;for(n=e<0?W.value.slice(0,e).reduce(((e,t)=>e+t[U.value]+N.gap),0)-Math.abs(ye.value+we.value):W.value.slice(0,e).reduce(((e,t)=>e+t[U.value]+N.gap),0)-Math.abs(ye.value);n<$.value[U.value];){const a=(e%u.length+u.length)%u.length;n+=(null===(t=W.value[a])||void 0===t?void 0:t[U.value])+N.gap,e++}l=e-1}return{min:Math.floor(a),max:Math.ceil(l)}})),Ae=t.computed((()=>{if("fade"===N.slideEffect)return;const e=z.value?"Y":"X",t=z.value?de.y:de.x;let a=ye.value+t;if(!N.wrapAround&&N.preventExcessiveDragging){let e=0;e=P.value?W.value.reduce(((e,t)=>e+t[U.value]),0):(g.value-Number(N.itemsToShow))*k.value;a=m({val:a,min:F.value?0:-1*e,max:F.value?e:0})}return`translate${e}(${a}px)`})),Te=t.computed((()=>({"--vc-carousel-height":y(N.height),"--vc-cloned-offset":y(we.value),"--vc-slide-gap":y(N.gap),"--vc-transition-duration":se.value?y(N.transition,"ms"):void 0}))),_e={slideTo:he,next:ge,prev:me},Ne=t.reactive({activeSlide:E,config:N,currentSlide:D,isSliding:se,isVertical:z,maxSlide:O,minSlide:L,nav:_e,normalizedDir:B,slideRegistry:r,slideSize:T,slides:u,slidesCount:g,viewport:A,visibleRange:xe});t.provide(c,Ne);const De=t.reactive({config:N,currentSlide:D,maxSlide:O,middleSlide:C,minSlide:L,slideSize:T,slidesCount:g});return i(t.reactive(Object.assign({data:De,next:ge,prev:me,handleArrowKeys:le,restartCarousel:function(){V(),G(),H(),re()},slideTo:he,updateBreakpointsConfig:V,updateSlideSize:H,updateSlidesData:G},t.toRefs(Ne)))),()=>{var e;const l=a.default||a.slides,n=(null==l?void 0:l(De))||[],{before:i,after:o}=be.value,r=[...p({slides:u,position:"before",toShow:i}),...n,...p({slides:u,position:"after",toShow:o})];if(!N.enabled||!r.length)return t.h("section",{ref:b,class:["carousel","is-disabled"]},r);const s=(null===(e=a.addons)||void 0===e?void 0:e.call(a,De))||[],d=t.h("ol",{class:"carousel__track",onMousedownCapture:N.mouseDrag?ve:null,onTouchstartPassiveCapture:N.touchDrag?ve:null,onWheel:N.mouseWheel?pe:null,style:{transform:Ae.value}},r),c=t.h("div",{class:"carousel__viewport",ref:A},d);return t.h("section",{ref:b,class:["carousel",`is-${B.value}`,`is-effect-${N.slideEffect}`,{"is-dragging":ce.value,"is-hover":ee.value,"is-sliding":se.value,"is-vertical":z.value}],dir:B.value,style:Te.value,"aria-label":N.i18n.ariaGallery,tabindex:"0",onBlur:ne,onFocus:ie,onMouseenter:te,onMouseleave:ae},[c,s,t.h(x)])}}});var _;!function(e){e.arrowDown="arrowDown",e.arrowLeft="arrowLeft",e.arrowRight="arrowRight",e.arrowUp="arrowUp"}(_||(_={}));const N=e=>`icon${e.charAt(0).toUpperCase()+e.slice(1)}`,D={arrowDown:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",arrowLeft:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z",arrowRight:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z",arrowUp:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"};const E=e=>e&&e in _,M=t.defineComponent({props:{name:{type:String,required:!0,validator:E},title:{type:String,default:e=>e.name?d.i18n[N(e.name)]:""}},setup(e){const a=t.inject(c,null);return()=>{const l=e.name;if(!l||!E(l))return;const n=D[l],i=t.h("path",{d:n}),o=(null==a?void 0:a.config.i18n[N(l)])||e.title,r=t.h("title",o);return t.h("svg",{class:"carousel__icon",viewBox:"0 0 24 24",role:"img","aria-label":o},[r,i])}}}),C=t.defineComponent({name:"CarouselNavigation",inheritAttrs:!1,props:{carousel:{type:Object}},setup(e,{slots:a,attrs:l}){let n=t.inject(c,null);const{next:i,prev:o}=a,r=t.computed((()=>!n.config.wrapAround&&n.currentSlide<=n.minSlide)),u=t.computed((()=>!n.config.wrapAround&&n.currentSlide>=n.maxSlide));return()=>{if(e.carousel&&(n=e.carousel),!n)return console.warn("[vue3-carousel]: A carousel component must be provided for the navigation component to display"),"";const{i18n:a}=n.config;return[t.h("button",Object.assign(Object.assign({type:"button",disabled:r.value,"aria-label":a.ariaPreviousSlide,title:a.ariaPreviousSlide,onClick:n.nav.prev},l),{class:["carousel__prev",{"carousel__prev--disabled":r.value},l.class]}),(null==o?void 0:o())||t.h(M,{name:{btt:"arrowDown",ltr:"arrowLeft",rtl:"arrowRight",ttb:"arrowUp"}[n.normalizedDir]})),t.h("button",Object.assign(Object.assign({type:"button",disabled:u.value,"aria-label":a.ariaNextSlide,title:a.ariaNextSlide,onClick:n.nav.next},l),{class:["carousel__next",{"carousel__next--disabled":u.value},l.class]}),(null==i?void 0:i())||t.h(M,{name:{btt:"arrowUp",ltr:"arrowRight",rtl:"arrowLeft",ttb:"arrowDown"}[n.normalizedDir]}))]}}}),O=t.defineComponent({name:"CarouselPagination",props:{disableOnClick:{type:Boolean},paginateByItemsToShow:{type:Boolean},carousel:{type:Object}},setup(e){let a=t.inject(c,null);const l=t.computed((()=>a.config.itemsToShow)),n=t.computed((()=>f({align:a.config.snapAlign,itemsToShow:l.value}))),i=t.computed((()=>e.paginateByItemsToShow&&l.value>1)),o=t.computed((()=>Math.ceil((a.activeSlide-n.value)/l.value))),r=t.computed((()=>Math.ceil(a.slidesCount/l.value))),u=e=>w(i.value?{val:o.value,max:r.value-1,min:0}:{val:a.activeSlide,max:a.maxSlide,min:a.minSlide})===e;return()=>{var l,o;if(e.carousel&&(a=e.carousel),!a)return console.warn("[vue3-carousel]: A carousel component must be provided for the pagination component to display"),"";const s=[];for(let d=i.value?0:a.minSlide;d<=(i.value?r.value-1:a.maxSlide);d++){const r=b(a.config.i18n[i.value?"ariaNavigateToPage":"ariaNavigateToSlide"],{slideNumber:d+1}),c=u(d),v=t.h("button",{type:"button",class:{"carousel__pagination-button":!0,"carousel__pagination-button--active":c},"aria-label":r,"aria-pressed":c,"aria-controls":null===(o=null===(l=a.slides[d])||void 0===l?void 0:l.exposed)||void 0===o?void 0:o.id,title:r,disabled:e.disableOnClick,onClick:()=>a.nav.slideTo(i.value?Math.floor(d*+a.config.itemsToShow+n.value):d)}),p=t.h("li",{class:"carousel__pagination-item",key:d},v);s.push(p)}return t.h("ol",{class:"carousel__pagination"},s)}}}),L=t.defineComponent({name:"CarouselSlide",props:{id:{type:String,default:e=>e.isClone?void 0:t.useId()},index:{type:Number,default:void 0},isClone:{type:Boolean,default:!1}},setup(e,{attrs:a,slots:l,expose:n}){const i=t.inject(c);if(t.provide(c,void 0),!i)return()=>"";const o=t.ref(e.index),r=t.getCurrentInstance();n({id:e.id,setIndex:e=>{o.value=e},getBoundingRect:()=>{const e=r.vnode.el;return e?e.getBoundingClientRect():{width:0,height:0}}});const u=t.computed((()=>o.value===i.activeSlide)),s=t.computed((()=>o.value===i.activeSlide-1)),d=t.computed((()=>o.value===i.activeSlide+1)),v=t.computed((()=>o.value>=i.visibleRange.min&&o.value<=i.visibleRange.max)),p=t.computed((()=>{if("auto"===i.config.itemsToShow)return;const e=i.config.itemsToShow,t=i.config.gap>0&&e>1?`calc(${100/e}% - ${i.config.gap*(e-1)/e}px)`:100/e+"%";return i.isVertical?{height:t}:{width:t}}));return i.slideRegistry.registerSlide(r,e.index),t.onUnmounted((()=>{i.slideRegistry.unregisterSlide(r)})),e.isClone&&(t.onMounted((()=>{g(r.vnode)})),t.onUpdated((()=>{g(r.vnode)}))),()=>{var n,r;return i.config.enabled?t.h("li",{style:[a.style,Object.assign({},p.value)],class:{carousel__slide:!0,"carousel__slide--clone":e.isClone,"carousel__slide--visible":v.value,"carousel__slide--active":u.value,"carousel__slide--prev":s.value,"carousel__slide--next":d.value,"carousel__slide--sliding":i.isSliding},onFocusin:()=>{i.viewport&&(i.viewport.scrollLeft=0),i.nav.slideTo(o.value)},id:e.isClone?void 0:e.id,"aria-hidden":e.isClone||void 0},null===(r=l.default)||void 0===r?void 0:r.call(l,{currentIndex:o.value,isActive:u.value,isClone:e.isClone,isPrev:s.value,isNext:d.value,isSliding:i.isSliding,isVisible:v.value})):null===(n=l.default)||void 0===n?void 0:n.call(l)}}});e.BREAKPOINT_MODE_OPTIONS=a,e.Carousel=T,e.DEFAULT_CONFIG=d,e.DEFAULT_DRAG_THRESHOLD=s,e.DEFAULT_MOUSE_WHEEL_THRESHOLD=10,e.DIR_MAP=l,e.DIR_OPTIONS=n,e.I18N_DEFAULT_CONFIG=i,e.Icon=M,e.NORMALIZED_DIR_OPTIONS=o,e.Navigation=C,e.Pagination=O,e.SLIDE_EFFECTS=r,e.SNAP_ALIGN_OPTIONS=u,e.Slide=L,e.createSlideRegistry=v,e.icons=D,e.injectCarousel=c}));
//# sourceMappingURL=carousel.min.js.map