react-simply-carousel/dist/index.esm.js

A simple, lightweight, fully controlled isomorphic (with SSR support) React.js carousel component. Touch enabled and responsive. With support for autoplay and infinity options. Fully customizable

import e,{memo as t,useState as n,useRef as i,Children as r,useCallback as o,useEffect as d}from"react";var c=function(){return c=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},c.apply(this,arguments)};function l(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(n[i[r]]=e[i[r]])}return n}function s(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,r,o=n.call(e),d=[];try{for(;(void 0===t||t-- >0)&&!(i=o.next()).done;)d.push(i.value)}catch(e){r={error:e}}finally{try{i&&!i.done&&(n=o.return)&&n.call(o)}finally{if(r)throw r.error}}return d}function a(e,t,n){if(n||2===arguments.length)for(var i,r=0,o=t.length;r<o;r++)!i&&r in t||(i||(i=Array.prototype.slice.call(t,0,r)),i[r]=t[r]);return e.concat(i||Array.prototype.slice.call(t))}"function"==typeof SuppressedError&&SuppressedError;var u=t(function(t){var u,v,m=t.responsiveProps,f=void 0===m?[]:m,h=l(t,["responsiveProps"]),p=s(n(0),2),b=p[0],w=p[1],y=s(n(h.activeSlideIndex),2),x=y[0],S=y[1],E=i(null),g=i(null),L=i(null),T=i(!1),I=i(0),k=i(!1),M=i(""),C=i(null),W=i(null),P=i(0),O=i(x),X=f.reduce(function(e,t){void 0===t&&(t={});var n=t.minWidth,i=void 0===n?0:n,r=t.maxWidth,o=void 0===r?null:r,d=l(t,["minWidth","maxWidth"]);return b>i&&(!o||b<=o)?c(c({},e),d):e},h),A=r.toArray(X.children),N=b?c(c({},X),{activeSlideIndex:Math.max(0,Math.min(X.activeSlideIndex,A.length-1)),itemsToShow:Math.min(A.length,X.itemsToShow||0),itemsToScroll:Math.min(A.length,X.itemsToScroll||1)}):h,F=N.containerProps,V=void 0===F?{}:F,j=V.style,z=void 0===j?{}:j,B=l(V,["style"]),R=N.innerProps,D=void 0===R?{}:R,q=D.style,H=void 0===q?{}:q,G=l(D,["style"]),J=N.itemsListProps,K=void 0===J?{}:J,Q=K.style,U=void 0===Q?{}:Q,Y=K.onTransitionEnd,Z=void 0===Y?void 0:Y,$=l(K,["style","onTransitionEnd"]),_=N.backwardBtnProps,ee=void 0===_?{}:_,te=ee.children,ne=void 0===te?null:te,ie=ee.show,re=void 0===ie||ie,oe=l(ee,["children","show"]),de=N.forwardBtnProps,ce=void 0===de?{}:de,le=ce.children,se=void 0===le?null:le,ae=ce.show,ue=void 0===ae||ae,ve=l(ce,["children","show"]),me=N.activeSlideProps,fe=void 0===me?{}:me,he=fe.className,pe=void 0===he?"":he,be=fe.style,we=void 0===be?{}:be,ye=l(fe,["className","style"]),xe=N.visibleSlideProps,Se=void 0===xe?{}:xe,Ee=Se.className,ge=void 0===Ee?"":Ee,Le=Se.style,Te=void 0===Le?{}:Le,Ie=l(Se,["className","style"]),ke=N.updateOnItemClick,Me=void 0!==ke&&ke,Ce=N.activeSlideIndex,We=N.onRequestChange,Pe=N.speed,Oe=void 0===Pe?0:Pe,Xe=N.delay,Ae=void 0===Xe?0:Xe,Ne=N.easing,Fe=void 0===Ne?"linear":Ne,Ve=N.itemsToShow,je=void 0===Ve?0:Ve,ze=N.itemsToScroll,Be=void 0===ze?1:ze,Re=N.children,De=N.onAfterChange,qe=N.autoplay,He=void 0!==qe&&qe,Ge=N.autoplayDirection,Je=void 0===Ge?"forward":Ge,Ke=N.disableNavIfAllVisible,Qe=void 0===Ke||Ke,Ue=N.hideNavIfAllVisible,Ye=void 0===Ue||Ue,Ze=N.centerMode,$e=void 0!==Ze&&Ze,_e=N.infinite,et=void 0===_e||_e,tt=N.disableNavIfEdgeVisible,nt=void 0===tt||tt,it=N.disableNavIfEdgeActive,rt=void 0===it||it,ot=N.dotsNav,dt=void 0===ot?{}:ot,ct=N.persistentChangeCallbacks,lt=void 0!==ct&&ct,st=N.autoplayDelay,at=void 0===st?0:st,ut=N.preventScrollOnSwipe,vt=void 0!==ut&&ut,mt=N.disableSwipeByMouse,ft=void 0!==mt&&mt,ht=N.disableSwipeByTouch,pt=void 0!==ht&&ht,bt=N.touchSwipeTreshold,wt=N.mouseSwipeTreshold,yt=N.swipeTreshold,xt=N.touchSwipeRatio,St=N.mouseSwipeRatio,Et=N.swipeRatio,gt=void 0===Et?1:Et,Lt=N.dirRTL,Tt=void 0!==Lt&&Lt,It=dt||{},kt=It.show,Mt=void 0!==kt&&kt,Ct=It.containerProps,Wt=void 0===Ct?{}:Ct,Pt=It.itemBtnProps,Ot=void 0===Pt?{}:Pt,Xt=It.activeItemBtnProps,At=void 0===Xt?{}:Xt,Nt=r.count(Re)-1,Ft=!!b&&(null===(u=g.current)||void 0===u?void 0:u.offsetWidth)>=(null===(v=L.current)||void 0===v?void 0:v.offsetWidth),Vt=Ye&&Ft,jt=Qe&&Ft,zt=Ce-x===0||!Oe&&!Ae?"none":"transform ".concat(Oe,"ms ").concat(Fe," ").concat(Ae,"ms"),Bt=o(function(e){var t,n=e.correctionSlideIndex,i=e.prevCorrectionSlideIndex,r=e.curActiveSlideIndex,o=L.current.offsetWidth,d=L.current.children,c=d.length,l=et?a([],s(d),!1).slice(c/3-i,c/3-i+c/3):a([],s(d),!1),u=null===(t=l[r])||void 0===t?void 0:t.offsetWidth,v=je?l.reduce(function(e,t,n){return n>=r&&n<r+je||n<r&&n<r+je-l.length?e+t.offsetWidth:e},0):g.current.offsetWidth,m=Math.min(v,g.current.offsetWidth),f=o-m,h=$e&&et?-(m-u)/2:0,p=et?o/3:0,b=n-r===0?0:"forward"===M.current&&r<n?p:"backward"===M.current&&r>n?-p:0,w=r-n!==0,y=function(e){var t=l.reduce(function(t,n,i){return i>=e?t:t+(n.offsetWidth||0)},0);return et?t:Math.min(f,t)},x=w&&et?y(n):0,S=w||!et?y(r):0,E=jt?0:S-x+h+b+p,T="translateX(".concat(Tt?"":"-").concat(E,"px)"),I=et?p+h:Math.min(f,l.reduce(function(e,t,n){return n<r?e+t.offsetWidth:e},0)),k=I+m,C=l.map(function(e,t){return{slideIndex:t,htmlElement:e}}),W=et?a(a(a(a([],s(l.slice(r).map(function(e,t){return{slideIndex:t+r,htmlElement:e}})),!1),s(C),!1),s(C),!1),s(l.slice(0,r).map(function(e,t){return{slideIndex:t,htmlElement:e}})),!1):C,P=W.reduce(function(e,t){var n=t.slideIndex,i=t.htmlElement.offsetWidth;return(e.summ>=I&&e.summ<k||e.summ+i>I&&e.summ+i<=k)&&e.items.push({slideIndex:n,isFullyVisible:e.summ+i<=k&&e.summ>=I}),e.summ+=i,e},{summ:0,items:[]}),O=!!P.items.find(function(e){return 0===e.slideIndex}),X=!!P.items.find(function(e){return e.slideIndex===l.length-1});return{slidesHTMLElements:l,innerMaxWidth:v,itemsListMaxTranslateX:f,activeSlideWidth:u,offsetCorrectionForCenterMode:h,offsetCorrectionForInfiniteMode:p,itemsListTranslateX:E,itemsListTransform:T,visibleSlides:P.items,isFirstSlideVisible:O,isLastSlideVisible:X}},[$e,jt,et,je,Tt]),Rt=b?Bt({prevCorrectionSlideIndex:O.current,curActiveSlideIndex:Ce,correctionSlideIndex:x}):{},Dt=Rt.innerMaxWidth,qt=void 0===Dt?0:Dt,Ht=Rt.itemsListMaxTranslateX,Gt=void 0===Ht?0:Ht,Jt=Rt.activeSlideWidth,Kt=void 0===Jt?0:Jt,Qt=Rt.offsetCorrectionForCenterMode,Ut=void 0===Qt?0:Qt,Yt=Rt.offsetCorrectionForInfiniteMode,Zt=void 0===Yt?0:Yt,$t=Rt.itemsListTranslateX,_t=void 0===$t?0:$t,en=Rt.itemsListTransform,tn=void 0===en?"none":en,nn=Rt.visibleSlides,rn=void 0===nn?[]:nn,on=o(function(e){var t;return"forward"===e?(t=Ce+Be)>Nt?et?t-Nt-1:Nt:t:"backward"===e?(t=Ce-Be)<0?et?Nt+1+t:0:t:Ce},[Ce,Be,Nt,et]),dn=o(function(e,t){var n;if(M.current=t,L.current.style.transition=Oe||Ae?"transform ".concat(Oe,"ms ").concat(Fe," ").concat(Ae,"ms"):"none",e!==Ce||lt){clearTimeout(C.current);var i=Bt({correctionSlideIndex:x,prevCorrectionSlideIndex:x,curActiveSlideIndex:e}),r=i.visibleSlides,o=i.isFirstSlideVisible,d=i.isLastSlideVisible,c=i.itemsListTransform;e!==Ce&&(null===(n=L.current)||void 0===n?void 0:n.style.transform)===c&&(T.current=!0),L.current.style.transform=c,We(e,{visibleSlides:r,isFirstSlideVisible:o,isLastSlideVisible:d})}else L.current.style.transform="translateX(".concat(Tt?"":"-").concat(Ut+Zt+(et?0:_t),"px)")},[lt,Ce,Ut,Ae,Fe,Oe,We,Zt,et,_t,x,Bt,Tt]),cn=o(function(){He&&(clearTimeout(C.current),C.current=setTimeout(function(){dn(on(Je),Je)},at||Ae))},[He,Je,at,dn,on,Ae]),ln=o(function(){dn(on("backward"),"backward")},[dn,on]),sn=o(function(e){S(Ce),Z&&Z(e)},[Ce,Z]),an=o(function(){dn(on("forward"),"forward")},[dn,on]),un=function(e,t,n){return e.map(function(e,i){var r=e.props,o=void 0===r?{}:r,d=o.className,s=void 0===d?"":d,a=o.onClick,u=void 0===a?null:a,v=o.style,m=void 0===v?{}:v,f=l(o,["className","onClick","style"]),h=l(e,["props"]),p=et?P.current>=A.length?"forward":"backward":i>=Ce?"forward":"backward",b=i+t===Ce,w=rn.find(function(e){return e.slideIndex===i+t}),y="".concat(s," ").concat(b?pe:""," ").concat(w?ge:"").trim()||void 0,x=c(c(c(c({},m),w?Te:{}),b?we:{}),{boxSizing:"border-box",margin:0}),S=!n&&Me?function(e){var t=e.direction,n=e.index,i=e.onClick;return function(e){dn(n,t||(Ce<n?"forward":"")||(Ce>n?"backward":"")),i&&i(e)}}({direction:p,index:i+t,onClick:u}):u,E=c(c(c({role:"tabpanel",className:y,style:x,onClick:S},f),w?Ie:{}),b?ye:{});return P.current+=1,c({props:E},h)})};return d(function(){var e=L.current,t={capture:!0,once:!0};function n(e){e.preventDefault(),e.stopPropagation()}function i(e){var t,n,i=!!(null===(t=e.touches)||void 0===t?void 0:t[0]),r=i?null===(n=e.touches)||void 0===n?void 0:n[0].clientX:e.clientX,o=I.current-r;if(k.current||!(Math.abs(o)<=5)){k.current=!0;var d=o*((i?xt:St)||gt)+Ut+Zt+(et?0:_t),c=L.current.offsetWidth,l=Math.max(-d,-c);L.current.style.transition="none",L.current.style.transform="translateX(".concat((Tt?-1:1)*l,"px)")}}function r(o){var d;if(document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",r),document.removeEventListener("touchmove",i),document.removeEventListener("touchend",r),k.current){var c=!!(null===(d=o.changedTouches)||void 0===d?void 0:d[0]),l=c?o.changedTouches[o.changedTouches.length-1].clientX:o.clientX,s=(I.current-l)*((c?xt:St)||gt);Math.abs(I.current-l)>5&&(null==e||e.removeEventListener("click",n,t),null==e||e.addEventListener("click",n,t));var a=(c?bt:wt)||yt||Kt/2,u=s>a?{index:on("forward"),direction:"forward"}:s<-a?{index:on("backward"),direction:"backward"}:{index:Ce,direction:"forward"};dn(u.index,u.direction)}I.current=0,k.current=!1}function o(e){var t,n;clearTimeout(C.current);var o=!!(null===(t=e.touches)||void 0===t?void 0:t[0]);k.current=!1,I.current=o?null===(n=e.touches)||void 0===n?void 0:n[0].clientX:e.clientX,o?(document.addEventListener("touchmove",i),document.addEventListener("touchend",r)):(document.addEventListener("mousemove",i),document.addEventListener("mouseup",r))}return jt||(ft||null==e||e.addEventListener("mousedown",o),pt||null==e||e.addEventListener("touchstart",o,{passive:!0}),ft&&pt||null==e||e.addEventListener("dragstart",r)),function(){k.current=!1,I.current=0,null==e||e.removeEventListener("click",n,t),null==e||e.removeEventListener("mousedown",o),null==e||e.removeEventListener("touchstart",o),null==e||e.removeEventListener("dragstart",r),document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",r),document.removeEventListener("touchmove",i),document.removeEventListener("touchend",r)}},[et,_t,tn,Ut,Zt,Ce,Kt,on,dn,jt,ft,pt,bt,wt,yt,xt,St,gt,Tt]),d(function(){return Ce!==x?(!Oe&&!Ae||T.current)&&(T.current=!1,S(Ce)):(De&&De(Ce,x),(et||"forward"===Je&&Ce!==Nt||"backward"===Je&&0!==Ce)&&cn()),function(){clearTimeout(C.current)}},[x,Ce,De,Oe,Ae,cn,et,Nt,Je]),d(function(){return b&&cn(),function(){clearTimeout(C.current)}},[b]),d(function(){function e(){clearTimeout(W.current),clearTimeout(C.current),W.current=setTimeout(function(){b!==window.innerWidth&&w(0)},400)}return b!==window.innerWidth&&w(window.innerWidth),window.addEventListener("resize",e),function(){clearTimeout(W.current),window.removeEventListener("resize",e)}},[b]),P.current=0,O.current=x,e.createElement("div",c({style:c({display:"flex",flexFlow:"row wrap",boxSizing:"border-box",justifyContent:"center",width:"100%"},z)},B,{ref:E}),re&&!Vt&&e.createElement("button",c({},oe,{type:"button",onClick:(0===_t&&nt||0===Ce&&rt)&&!et?void 0:ln,disabled:"boolean"==typeof oe.disabled?oe.disabled:!(!(0===_t&&nt||0===Ce&&rt)||et)}),ne),e.createElement("div",c({},G,{style:c(c({width:"100%"},H),{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:qt?"".concat(qt,"px"):void 0,flex:qt?void 0:"1 0 auto"}),ref:g}),e.createElement("div",c({},$,{style:c(c({},U),{display:"flex",boxSizing:"border-box",outline:"none",transition:zt,transform:tn,touchAction:vt?"none":"auto"}),onTransitionEnd:Oe||Ae?sn:Z,tabIndex:-1,role:"presentation",ref:L}),et&&un(A.slice(x),x,jt),un(A,0,jt),et&&un(A,0,jt),et&&un(A.slice(0,x),0,jt))),ue&&!Vt&&e.createElement("button",c({},ve,{type:"button",onClick:(_t===Gt&&nt||Ce===Nt&&rt)&&!et?void 0:an,disabled:"boolean"==typeof ve.disabled?ve.disabled:!(!(_t===Gt&&nt||Ce===Nt&&rt)||et)}),se),!!Mt&&e.createElement("div",c({style:{width:"100%",display:"flex",justifyContent:"center"}},Wt),Array.from({length:Math.ceil(A.length/Be)}).map(function(t,n){return e.createElement("button",c({type:"button",key:n,title:"".concat(n)},Ot,Ce>=n*Be&&Ce<Math.min(Be*(n+1),Nt+1)?At:{},{onClick:function(){dn(Math.min(n*Be,A.length-1),Math.min(n*Be,A.length-1)>Ce?"forward":"backward")}}))})))});export{u as default};