react-responsive-3d-carousel/dist/index.esm.min.js

React Responsive 3D Carousel

import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useEffect as o,useMemo as n,useRef as r,createContext as i,useState as a,useCallback as c}from"react";var s=function(){return s=Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var r in e=arguments[o])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},s.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var l="--container-width",d="--container-height",u="--item-width",h={default:{translate:{x:0,y:0,z:-1},rotation:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},0:{translate:{x:0,y:0,z:0},rotation:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}}},v={default:{translate:{x:0,y:0,z:-1},rotation:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},"-1":{translate:{x:-.5,y:0,z:0},rotation:{x:0,y:40,z:0},offset:{x:.5*Math.cos(Math.PI/180*40),y:0,z:-1*Math.sin(Math.PI/180*30)}},0:{translate:{x:0,y:0,z:0},rotation:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},1:{translate:{x:.5,y:0,z:0},rotation:{x:0,y:-40,z:0},offset:{x:-.5*Math.cos(Math.PI/180*40),y:0,z:-1*Math.sin(Math.PI/180*30)}}},f={default:{translate:{x:0,y:0,z:-1},rotation:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},"-2":{translate:{x:-.5,y:0,z:0},rotation:{x:0,y:40,z:0},offset:{x:.5*Math.cos(Math.PI/180*40),y:0,z:-1*Math.sin(Math.PI/180*40)}},"-1":{translate:{x:-.25,y:0,z:0},rotation:{x:0,y:20,z:0},offset:{x:.25*Math.cos(Math.PI/180*40),y:0,z:-.5*Math.sin(Math.PI/180*40)}},0:{translate:{x:0,y:0,z:0},rotation:{x:0,y:0,z:0},offset:{x:0,y:0,z:0}},1:{translate:{x:.25,y:0,z:0},rotation:{x:0,y:-20,z:0},offset:{x:-.25*Math.cos(Math.PI/180*40),y:0,z:-.5*Math.sin(Math.PI/180*40)}},2:{translate:{x:.5,y:0,z:0},rotation:{x:0,y:-40,z:0},offset:{x:-.5*Math.cos(Math.PI/180*40),y:0,z:-1*Math.sin(Math.PI/180*40)}}},p=function(t,e){return Math.round(t*Math.pow(10,e))/Math.pow(10,e)},w=function(t,e){var o,n,r,i={},a=null!==(o=null==e?void 0:e.widthFactor)&&void 0!==o?o:1,c=null!==(n=null==e?void 0:e.depthFactor)&&void 0!==n?n:1,s=null!==(r=null==e?void 0:e.angleFactor)&&void 0!==r?r:1;return Object.entries(t).forEach((function(t){var e=t[0],o=t[1],n={x:p(o.translate.x*a,3),y:o.translate.y,z:p(o.translate.z*a,3)},r={x:p(o.rotation.x*s,3),y:p(o.rotation.y*s,3),z:p(o.rotation.z*s,3)},l={x:p(o.offset.x*a,3),y:o.offset.y,z:p(o.offset.z*c,3)};i[e]={translate:n,rotation:r,offset:l}})),i},m=function(t,e){var o,n=t.width,r=t.height,i=t.translate,a=t.rotation,c=t.offset,s="number"==typeof n?"calc(".concat(n," * var(").concat(l,"))"):null!=n?n:"auto",h="number"==typeof r?"calc(".concat(r," * var(").concat(d,"))"):null!=r?r:"auto";switch(e){case"top":o=0;break;case"bottom":o=-100;break;case"center":o=-50}var v=Math.sqrt(Math.pow(a.x,2)+Math.pow(a.y,2)+Math.pow(a.z,2)),f=v?a.x/v:0,p=v?a.y/v:0,w=v?a.z/v:0,m="number"==typeof i.x?"".concat(i.x," * var(").concat(l,")"):i.x,y="number"==typeof i.y?"".concat(i.y," * var(").concat(d,")"):i.y,x="number"==typeof i.z?"".concat(i.z," * var(").concat(l,")"):i.z,g="number"==typeof c.x?"".concat(c.x," * 100%"):c.x,b="number"==typeof c.y?"".concat(c.y," * 100%"):c.y,z="number"==typeof c.z?"".concat(c.z," * var(").concat(u,")"):c.z;return{width:s,height:h,transform:"translate(-50%, ".concat(o,"%) \n  translate3d(calc(").concat(m," + ").concat(g,"), calc(").concat(y," + ").concat(b,"), calc(").concat(x," + ").concat(z,")) \n  rotate3d(").concat(f,", ").concat(p,", ").concat(w,", calc(").concat(v,"deg)")}},y=function(t,e,r,i,a,c,s,l){var d=n((function(){var e="default"===c?function(t,e){if(e&&"numOfSlides"in e){if(2===e.numOfSlides)return w(h,e);if(3===e.numOfSlides)return w(v,e);if(5===e.numOfSlides)return w(f,e)}return w(t<3?h:t<5?v:f,e)}(t.length,l):c;return function(t,e){var o={};for(var n in t)o[n]=m(t[n],e);return o}(e,r)}),[t,r,c,l]);o((function(){var o=e.current,n=function(t,e){t.style.width="auto"===e.width?i:e.width,t.style.height="auto"===e.height?a:e.height,t.style.transform=e.transform,"auto"!==t.style.width?t.classList.add("fixed-width"):t.classList.remove("fixed-width"),"auto"!==t.style.height?t.classList.add("fixed-height"):t.classList.remove("fixed-height")};o.forEach((function(e,o){var r=o-s;if(d[r])n(e,d[r]);else{var i=r+(r>0?-t.length:t.length);d[i]?n(e,d[i]):n(e,d.default)}}))}),[t,i,a,d,s])};function x(t,e){void 0===e&&(e={});var o=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}x(".react-responsive-3d-carousel__arrows{height:100%;pointer-events:none;position:relative;width:100%}.react-responsive-3d-carousel__arrows>button{background:transparent;border:none;color:var(--arrow-color,#fff);cursor:pointer;margin:0;overflow:visible;padding:0;pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);transition:color .2s ease-in-out;width:auto}.react-responsive-3d-carousel__arrows>button:hover{color:var(--arrow-hover-color,rgba(34,34,34,.533))}.react-responsive-3d-carousel__arrows>button:first-of-type{left:0}.react-responsive-3d-carousel__arrows>button:last-of-type{right:0}.react-responsive-3d-carousel__arrows>button>*{filter:drop-shadow(var(--arrow-drop-shadow,none));height:var(--arrow-height,2rem);width:var(--arrow-width,2rem)}");var g=function(o){var n=o.width,r=void 0===n?"3rem":n,i=o.height,a=void 0===i?"5rem":i,c=o.color,s=void 0===c?"#ffffff":c,l=o.hoverColor,d=void 0===l?"#888888":l,u=o.shadow,h=void 0===u?"0 0.05rem 0.1rem rgba(0, 0, 0, 0.3)":u,v=o.nextArrowTranslate,f=void 0===v?["0px","0px"]:v,p=o.prevArrowTranslate,w=void 0===p?["0px","0px"]:p,m=o.onClickNext,y=o.onClickPrev,x=o.nextIcon,g=o.prevIcon;return t("div",{className:"react-responsive-3d-carousel__arrows",style:{"--arrow-width":r,"--arrow-height":a,"--arrow-drop-shadow":h,"--arrow-color":s,"--arrow-hover-color":d},children:[e("button",{type:"button",onClick:function(t){t.stopPropagation(),y&&y(t)},"aria-label":"previous slide",style:{transform:"translateY(-50%) translate(".concat(w[0],", ").concat(w[1],")")},children:g||e(b,{})}),e("button",{type:"button",onClick:function(t){t.stopPropagation(),m&&m(t)},"aria-label":"next slide",style:{transform:"translateY(-50%) translate(".concat(f[0],", ").concat(f[1],")")},children:x||e(z,{})})]})},b=function(){return e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",preserveAspectRatio:"none",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e("polyline",{points:"15 18 9 12 15 6"})})},z=function(){return e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",preserveAspectRatio:"none",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e("polyline",{points:"9 18 15 12 9 6"})})};g.displayName="Arrows";x(".react-responsive-3d-carousel__indicators{align-items:center;display:flex;gap:1.5rem;justify-content:center;list-style:none;margin:0;padding:0;text-indent:0}.react-responsive-3d-carousel__indicators>li{color:var(--indicator-color,#fff);cursor:pointer;display:inline-block;line-height:1;list-style:none;margin:0;padding:0;pointer-events:auto;text-indent:0;transition:color .2s ease-in-out}.react-responsive-3d-carousel__indicators>li:hover{color:var(--indicator-active-color,#222)}.react-responsive-3d-carousel__indicators>li>*{filter:drop-shadow(var(--indicator-shadow,none));height:var(--indicator-height,.5rem);width:var(--indicator-width,.5rem)}.react-responsive-3d-carousel__indicators>li.active{color:var(--indicator-active-color,#222)}");var _=function(t){var o=t.length,n=t.curIndex,r=t.color,i=void 0===r?"#ffffff":r,a=t.width,c=void 0===a?"0.6rem":a,s=t.height,l=void 0===s?"0.6rem":s,d=t.gap,u=void 0===d?"1.5rem":d,h=t.activeColor,v=void 0===h?"#888888":h,f=t.shadow,p=void 0===f?"0 0.05rem 0.1rem rgba(0, 0, 0, 0.5)":f,w=t.translate,m=void 0===w?["0px","0px"]:w,y=t.indicatorIcon,x=t.onClick,g={gap:u,transform:"translate(".concat(m[0],", ").concat(m[1],")"),"--indicator-width":c,"--indicator-height":l,"--indicator-color":i,"--indicator-active-color":v,"--indicator-shadow":p};return e("ul",{className:"react-responsive-3d-carousel__indicators",style:g,children:Array.from({length:o},(function(t,o){return e("li",{onClick:function(t){return function(t,e){t.stopPropagation(),x&&x(t,e)}(t,o)},"aria-label":"slide item ".concat(o+1),className:o===n?"active":"",children:y||e(M,{})},o)}))})},M=function(){return e("svg",{preserveAspectRatio:"none",width:"24",height:"24",viewBox:"0 0 24 24",fill:"currentColor",children:e("circle",{cx:"12",cy:"12",r:"10"})})};_.displayName="Indicators";x(".react-responsive-3d-carousel__status{color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:inherit}");var k=function(t){var o=t.length,n=t.curIndex,r=t.color,i=void 0===r?"#ffffff":r,a=t.fontSize,c=void 0===a?"1rem":a,s=t.fontWeight,l=void 0===s?"600":s,d=t.shadow,u=void 0===d?"0 0.05rem 0.1rem rgba(0, 0, 0, 0.5)":d,h=t.translate,v=void 0===h?["0px","0px"]:h,f={color:i,fontSize:c,fontWeight:l,textShadow:u,transform:"translate(".concat(v[0],", ").concat(v[1],")")};return e("p",{className:"react-responsive-3d-carousel__status","aria-label":"".concat(n+1," of ").concat(o),style:f,children:"".concat(n+1," / ").concat(o)})};k.displayName="Status";x(".react-responsive-3d-carousel{box-sizing:border-box;overflow:hidden;padding:1rem;position:relative;width:100%}.react-responsive-3d-carousel__list{list-style:none;margin:0;padding:0;perspective:var(--container-width,1500px);position:relative;text-indent:0;transform-style:preserve-3d;width:100%}.react-responsive-3d-carousel__item{border:0;left:50%;line-height:0;list-style:none;margin:0;overflow:hidden;padding:0;position:absolute;text-indent:0;top:50%;transform:translate(-50%,-50%);will-change:transform}.react-responsive-3d-carousel__item.fixed-width.fixed-height>*{left:0;position:absolute;top:0}.react-responsive-3d-carousel__item.fixed-width>*{-o-object-fit:cover;object-fit:cover;width:100%}.react-responsive-3d-carousel__item.fixed-height>*{height:100%;-o-object-fit:cover;object-fit:cover}.react-responsive-3d-carousel__arrows-container{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.react-responsive-3d-carousel__status-container{pointer-events:none;position:absolute;right:1rem;top:0}.react-responsive-3d-carousel__indicators-container{bottom:1rem;left:0;pointer-events:none;position:absolute;width:100%}");var C=i({curIndex:0,setCurIndex:function(t){},slideNext:function(){},slidePrev:function(){}}),I=function(i){var h=i.children,v=i.ariaLabel,f=void 0===v?"3d carousel":v,p=i.items,w=i.startIndex,m=void 0===w?0:w,x=i.containerHeight,b=void 0===x?"auto":x,z=i.containerWidth,M=void 0===z?"100%":z,I=i.containerPadding,P=void 0===I?"1rem":I,S=i.width,N=void 0===S?"400px":S,E=i.height,L=void 0===E?"300px":E,O=i.align,A=void 0===O?"center":O,j=i.boxShadow,T=void 0===j?"0 0.1rem 0.5rem rgba(0, 0, 0, 0.5)":j,D=i.perspective,R=void 0===D?"auto":D,W=i.perspectiveOrigin,B=void 0===W?"center":W,F=i.layout,Y=void 0===F?"default":F,H=i.defaultOption,q=i.sizeDuration,X=void 0===q?1e3:q,K=i.sizeTimingFn,U=void 0===K?"ease-in-out":K,G=i.transformDuration,J=void 0===G?1e3:G,Q=i.transformTimingFn,V=void 0===Q?"ease-in-out":Q,Z=i.focusOnSelect,$=void 0===Z||Z,tt=i.pauseOnHover,et=void 0===tt||tt,ot=i.onClickItem,nt=i.onChange,rt=i.autoPlay,it=void 0===rt||rt,at=i.interval,ct=void 0===at?3e3:at,st=i.infiniteLoop,lt=void 0===st||st,dt=i.autoFocus,ut=void 0!==dt&&dt,ht=i.slideWithKeyboard,vt=void 0===ht?"both":ht,ft=i.swipeable,pt=void 0===ft||ft,wt=i.swipeDirection,mt=void 0===wt?"horizontal":wt,yt=i.onSwipeStart,xt=i.onSwipeEnd,gt=i.onSwipeMove,bt=i.showStatus,zt=void 0===bt||bt,_t=i.status,Mt=i.showArrows,kt=void 0===Mt||Mt,Ct=i.arrows,It=i.showIndicators,Pt=void 0===It||It,St=i.indicators,Nt=r(null),Et=r(null),Lt=r(!1),Ot=a(m),At=Ot[0],jt=Ot[1],Tt=n((function(){return"number"==typeof N?"calc(".concat(N," * var(").concat(l,"))"):N}),[N]),Dt=n((function(){return"number"==typeof L?"calc(".concat(L," * var(").concat(d,"))"):L}),[L]),Rt=r([]);o((function(){var t=Nt.current;t&&(Rt.current=Array.from(t.getElementsByClassName("react-responsive-3d-carousel__item")))}),[p]);var Wt=c((function(){Lt.current||jt((function(t){return lt||0!==t?(t-1+p.length)%p.length:t}))}),[p,lt,jt]),Bt=c((function(){Lt.current||jt((function(t){return lt||t!==p.length-1?(t+1)%p.length:t}))}),[p,lt,jt]);o((function(){jt(m)}),[m]),o((function(){At<0?jt(0):p.length-1<At&&jt(p.length-1)}),[p,At]);var Ft=r(!1);o((function(){Ft.current?nt&&nt(At,p[At]):Ft.current=!0}),[At,nt]),function(t,e,n,r){o((function(){if(t){var o=window.setInterval((function(){r()}),e);return function(){clearInterval(o)}}}),[t,e,n,r])}(it,ct,At,Bt),function(t,e,n,r,i){o((function(){e.current.forEach((function(t){t.style.setProperty(u,"".concat(t.offsetWidth,"px"))}))}),[t,r,i]),o((function(){var t=n.current;if(t){var e=function(){t.style.setProperty(l,"".concat(t.offsetWidth,"px")),t.style.setProperty(d,"".concat(t.offsetHeight,"px"))};e();var o="ResizeObserver"in window?new ResizeObserver(e):null;return o?o.observe(t):window.addEventListener("resize",e),function(){o?o.disconnect():window.removeEventListener("resize",e)}}}),[])}(p,Rt,Et,Tt,At),y(p,Rt,A,Tt,Dt,Y,At,H),function(t){var e=t.containerRef,n=t.swipeable,i=t.swipeDirection,a=t.slideNext,c=t.slidePrev,s=t.onSwipeStart,l=t.onSwipeEnd,d=t.onSwipeMove,u=r(!1);o((function(){if(n){var t=e.current;if(t){var o=0,r=0,h=function(t){u.current=!0,o=t.touches[0].clientX,r=t.touches[0].clientY,s&&s(t)},v=function(t){u.current&&d&&d(t)},f=function(t){if(u.current){u.current=!1,l&&l(t);var e=t.changedTouches[0].clientX,n=t.changedTouches[0].clientY,s=e-o,d=n-r,h=Math.abs(s),v=Math.abs(d);Math.sqrt(Math.pow(h,2)+Math.pow(v,2))<30||("horizontal"===i&&h>v?(t.preventDefault(),s>0?c():a()):"vertical"===i&&v>h&&(t.preventDefault(),d>0?c():a()))}};return t.addEventListener("touchstart",h,{passive:!0}),t.addEventListener("touchmove",v,{passive:!0}),t.addEventListener("touchend",f),function(){t.removeEventListener("touchstart",h),t.removeEventListener("touchmove",v),t.removeEventListener("touchend",f)}}}}),[n,i,a,c,s,l,d])}({containerRef:Nt,swipeable:pt,swipeDirection:mt,slideNext:Bt,slidePrev:Wt,onSwipeStart:yt,onSwipeEnd:xt,onSwipeMove:gt}),function(t,e,n,r,i){o((function(){var o=t.current;o&&e&&o.focus()}),[e]),o((function(){if("none"!==n){var e=t.current;if(e){var o=function(t){if(e===document.activeElement)switch(t.key){case"ArrowLeft":"horizontal"!==n&&"both"!==n||i();break;case"ArrowRight":"horizontal"!==n&&"both"!==n||r();break;case"ArrowUp":"vertical"!==n&&"both"!==n||i();break;case"ArrowDown":"vertical"!==n&&"both"!==n||r()}};return window.addEventListener("keydown",o),function(){window.removeEventListener("keydown",o)}}}}),[n,r,i])}(Nt,ut,vt,Bt,Wt);var Yt=function(){et&&(Lt.current=!0)},Ht=function(){et&&(Lt.current=!1)},qt={width:M,height:b,padding:P},Xt={perspective:"auto"===R?"var(".concat(l,")"):R,perspectiveOrigin:B,height:"auto"===b?Dt:"100%"},Kt={width:Tt,height:Dt,transition:"transform ".concat(J,"ms ").concat(V,", width ").concat(X,"ms ").concat(U,", height ").concat(X,"ms ").concat(U),cursor:$?"pointer":"initial",top:"top"===A?"0%":"bottom"===A?"100%":"50%",boxShadow:T};return e(C.Provider,{value:{curIndex:At,setCurIndex:jt,slideNext:Bt,slidePrev:Wt},children:t("div",{className:"react-responsive-3d-carousel","aria-label":f,tabIndex:"none"!==vt?0:void 0,style:qt,ref:Nt,children:[t("ul",{className:"react-responsive-3d-carousel__list",style:Xt,ref:Et,children:[p.map((function(t,o){return e("li",{className:"react-responsive-3d-carousel__item \n                ".concat("auto"!==Tt?"fixed-width":""," \n                ").concat("auto"!==Dt?"fixed-height":""),onClick:function(t){return function(t,e){$&&jt(e),ot&&ot(t,e,p[At],At===e)}(t,o)},style:Kt,onMouseEnter:Yt,onMouseLeave:Ht,children:t},o)})),h]}),zt&&e("div",{className:"react-responsive-3d-carousel__status-container",children:e(k,s({length:p.length,curIndex:At},_t))}),kt&&e("div",{className:"react-responsive-3d-carousel__arrows-container",children:e(g,s({onClickNext:function(t){Bt(),(null==Ct?void 0:Ct.onClickNext)&&Ct.onClickNext(t)},onClickPrev:function(t){Wt(),(null==Ct?void 0:Ct.onClickPrev)&&Ct.onClickPrev(t)}},Ct))}),Pt&&e("div",{className:"react-responsive-3d-carousel__indicators-container",children:e(_,s({length:p.length,curIndex:At,onClick:function(t,e){jt(e),(null==St?void 0:St.onClick)&&St.onClick(t,e)}},St))})]})})};export{g as Arrows,I as Carousel,C as CarouselContext,_ as Indicators,k as Status};
//# sourceMappingURL=index.esm.min.js.map