react-simply-carousel - npm Package Compare versions

Comparing version 8.2.1 to 8.3.0

dist/index.d.ts

@@ -12,5 +12,14 @@ import React, { HTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
 };
+declare type VisibleSlidesState = {
+    isFirstSlideVisible: boolean;
+    isLastSlideVisible: boolean;
+    visibleSlides: {
+        slideIndex: number;
+        isFullyVisible: boolean;
+    }[];
+};
 declare type ReactSimplyCarouselStaticProps = {
     activeSlideIndex: number;
     activeSlideProps?: HTMLAttributes<any>;
+    visibleSlideProps?: HTMLAttributes<any>;
     autoplay?: boolean;
@@ -31,3 +40,3 @@ autoplayDirection?: NavDirection;
     onAfterChange?: (activeSlideIndex: number, deprecated_positionSlideIndex: number) => void;
-    onRequestChange: (newActiveSlideIndex: number) => void;
+    onRequestChange: (newActiveSlideIndex: number, newVisibleSlidesState: VisibleSlidesState) => void;
     speed?: number;
@@ -34,0 +43,0 @@ updateOnItemClick?: boolean;

dist/index.esm.js

@@ -1,1 +0,1 @@
-import e,{memo as t,useState as n,useRef as r,Children as o,useMemo as i,useCallback as c,useEffect as a}from"react";function u(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?u(Object(n),!0).forEach((function(t){d(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(){return s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s.apply(this,arguments)}function f(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function v(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,i=[],c=!0,a=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);c=!0);}catch(e){a=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(a)throw o}}return i}(e,t)||h(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function m(e){return function(e){if(Array.isArray(e))return p(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||h(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function h(e,t){if(e){if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,t):void 0}}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var b=["responsiveProps"],y=["minWidth","maxWidth"],w=["style","onClickCapture"],g=["style"],E=["style","onTouchStart","onMouseDown","onTransitionEnd"],x=["children","show"],O=["children","show"],S=["className","style"],T=["className","onClick","style"],k=["props"];function j(t){var u=t.responsiveProps,d=void 0===u?[]:u,h=f(t,b),p=v(n(0),2),j=p[0],C=p[1],P=v(n(h.activeSlideIndex),2),L=P[0],I=P[1],M=r(null),W=r(null),A=r(null),N=r(0),D=r(!1),X=r(""),z=r(null),B=r(null),V=r(0),F=d.reduce((function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.minWidth,r=void 0===n?0:n,o=t.maxWidth,i=void 0===o?null:o,c=f(t,y);return j>r&&(!i||j<=i)?l(l({},e),c):e}),h),q=o.toArray(F.children),R=j?l(l({},F),{},{activeSlideIndex:Math.max(0,Math.min(F.activeSlideIndex,q.length-1)),itemsToShow:Math.min(q.length,F.itemsToShow||0),itemsToScroll:Math.min(q.length,F.itemsToScroll||1)}):h,U=R.containerProps,$=(U=void 0===U?{}:U).style,G=void 0===$?{}:$,H=U.onClickCapture,J=void 0===H?null:H,K=f(U,w),Q=R.innerProps,Y=(Q=void 0===Q?{}:Q).style,Z=void 0===Y?{}:Y,_=f(Q,g),ee=R.itemsListProps,te=(ee=void 0===ee?{}:ee).style,ne=void 0===te?{}:te,re=ee.onTouchStart,oe=void 0===re?null:re,ie=ee.onMouseDown,ce=void 0===ie?null:ie,ae=ee.onTransitionEnd,ue=void 0===ae?null:ae,le=f(ee,E),de=R.backwardBtnProps,se=(de=void 0===de?{}:de).children,fe=void 0===se?null:se,ve=de.show,me=void 0===ve||ve,he=f(de,x),pe=R.forwardBtnProps,be=(pe=void 0===pe?{}:pe).children,ye=void 0===be?null:be,we=pe.show,ge=void 0===we||we,Ee=f(pe,O),xe=R.activeSlideProps,Oe=(xe=void 0===xe?{}:xe).className,Se=void 0===Oe?"":Oe,Te=xe.style,ke=void 0===Te?{}:Te,je=f(xe,S),Ce=R.updateOnItemClick,Pe=void 0!==Ce&&Ce,Le=R.activeSlideIndex,Ie=R.onRequestChange,Me=R.speed,We=void 0===Me?0:Me,Ae=R.delay,Ne=void 0===Ae?0:Ae,De=R.easing,Xe=void 0===De?"linear":De,ze=R.itemsToShow,Be=void 0===ze?0:ze,Ve=R.itemsToScroll,Fe=void 0===Ve?1:Ve,qe=R.children,Re=R.onAfterChange,Ue=R.autoplay,$e=void 0!==Ue&&Ue,Ge=R.autoplayDirection,He=void 0===Ge?"forward":Ge,Je=R.disableNavIfAllVisible,Ke=void 0===Je||Je,Qe=R.hideNavIfAllVisible,Ye=void 0===Qe||Qe,Ze=R.centerMode,_e=void 0!==Ze&&Ze,et=R.infinite,tt=void 0===et||et,nt=R.disableNavIfEdgeVisible,rt=void 0===nt||nt,ot=R.disableNavIfEdgeActive,it=void 0===ot||ot,ct=R.dotsNav,at=void 0===ct?{}:ct,ut=R.persistentChangeCallbacks,lt=void 0!==ut&&ut,dt=R.showSlidesBeforeInit,st=void 0!==dt&&dt,ft=at||{},vt=ft.show,mt=void 0!==vt&&vt,ht=ft.containerProps,pt=void 0===ht?{}:ht,bt=ft.itemBtnProps,yt=void 0===bt?{}:bt,wt=ft.activeItemBtnProps,gt=void 0===wt?{}:wt,Et=j?m(A.current.children):[],xt=i((function(){return j?tt?Et.slice(q.length-L,q.length-L+q.length):Et:[]}),[L,q.length,j,tt,Et]),Ot=j?A.current.offsetWidth-W.current.offsetWidth:0,St=function(e){var t=xt.reduce((function(t,n,r){return r>=e?t:t+(n.offsetWidth||0)}),0);return tt?t:Math.min(Ot,t)},Tt=i((function(){return j&&Be?xt.reduce((function(e,t,n){return n>=Le&&n<Le+Be||n<Le&&n<Le+Be-xt.length?e+t.offsetWidth:e}),0):0}),[Le,Be,xt,j]),kt=o.count(qe)-1,jt=Be===q.length,Ct=Ye&&jt,Pt=Ke&&jt,Lt=Le-L!=0,It=j&&Lt&&tt?St(L):0,Mt=!j||!Lt&&tt?0:St(Le),Wt=j?xt[Le].offsetWidth:0,At=j&&(_e&&tt)?-(Math.min(Tt||W.current.offsetWidth,W.current.offsetWidth)-Wt)/2:0,Nt=i((function(){return tt&&j?A.current.offsetWidth/3:0}),[j,tt]),Dt=L-Le!=0&&A.current?"forward"===X.current.toLowerCase()&&Le<L?Nt:"backward"===X.current.toLowerCase()&&Le>L?-Nt:0:0,Xt=Lt&&(We||Ne)?"transform ".concat(We,"ms ").concat(Xe," ").concat(Ne,"ms"):"none",zt=Pt||!j?0:Mt-It+At+Dt+Nt,Bt=j?"translateX(-".concat(zt,"px)"):"none",Vt=c((function(e){if("forward"===e){var t=Le+Fe;return t>kt?tt?t-kt-1:Le:t}if("backward"===e){var n=Le-Fe;return n<0?tt?kt+1+n:Le:n}return Le}),[Le,Fe,kt,tt]),Ft=c((function(e,t){X.current=t,A.current.style.transition=We||Ne?"transform ".concat(We,"ms ").concat(Xe," ").concat(Ne,"ms"):"none",e!==Le||lt?(clearTimeout(z.current),Ie(e)):(N.current=0,D.current=!1,A.current.style.transform="translateX(-".concat(At+Nt+(tt?0:zt),"px)"))}),[lt,Le,At,Ne,Xe,We,Ie,Nt,tt,zt]),qt=c((function(){$e&&(clearTimeout(z.current),z.current=setTimeout((function(){Ft(Vt(He),He)}),Ne))}),[$e,He,Ft,Vt,Ne]),Rt=c((function(e){D.current&&(e.preventDefault(),e.stopPropagation(),J&&J(e))}),[J]),Ut=c((function(){Ft(Vt("backward"),"backward")}),[Ft,Vt]),$t=c((function(e){D.current=!0;var t=e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX,n=N.current-t+At+Nt+(tt?0:zt),r=A.current.offsetWidth-W.current.offsetWidth,o=Math.max(Math.min(0,-n),-r);A.current.style.transition="none",A.current.style.transform="translateX(".concat(o,"px)")}),[At,Nt,tt,zt]),Gt=c((function(e){if(A.current.removeEventListener("mouseout",Gt),A.current.removeEventListener("dragstart",Gt),document.removeEventListener("mousemove",$t),document.removeEventListener("mouseup",Gt),document.removeEventListener("touchmove",$t),document.removeEventListener("touchend",Gt),D.current){var t=e.changedTouches&&e.changedTouches.length?e.changedTouches[e.changedTouches.length-1].clientX:e.clientX,n=N.current-t;n>Wt/2?Ft(Vt("forward"),"forward"):n<-Wt/2?Ft(Vt("backward"),"backward"):Ft(Le,"forward")}}),[Le,Wt,Ft,Vt,$t]),Ht=c((function(e){clearTimeout(z.current),D.current||(N.current=e.clientX,document.addEventListener("mousemove",$t),document.addEventListener("mouseup",Gt),A.current.addEventListener("mouseout",Gt),A.current.addEventListener("dragstart",Gt)),ce&&ce(e)}),[$t,Gt]),Jt=c((function(e){clearTimeout(z.current),D.current||(N.current=e.touches[0].clientX,document.addEventListener("touchmove",$t),document.addEventListener("touchend",Gt)),oe&&oe(e)}),[$t,Gt]),Kt=c((function(e){I(Le),ue&&ue(e)}),[Le]),Qt=c((function(){Ft(Vt("forward"),"forward")}),[Ft,Vt]),Yt=function(e,t,n){return e.map((function(e,r){var o=e.props,i=(o=void 0===o?{}:o).className,c=void 0===i?"":i,a=o.onClick,u=void 0===a?null:a,d=o.style,s=void 0===d?{}:d,v=f(o,T),m=f(e,k),h=tt?V.current>=q.length?"forward":"backward":r>=Le?"forward":"backward",p=r+t===Le,b="".concat(c," ").concat(h," ").concat(p?Se:""),y=l(l(l({},s),p?ke:{}),{},{boxSizing:"border-box",margin:0}),w=!n&&Pe?function(e){var t=e.direction,n=e.index,r=e.onClick;return function(e){Ft(n,t||(Le<n?"forward":"")||(Le>n?"backward":"")),r&&r(e)}}({direction:h,index:r+t,onClick:u}):u,g=l(l({role:"tabpanel",className:b,style:y,onClick:w},v),p?je:{});return V.current+=1,l({props:g},m)}))};return a((function(){return N.current=0,D.current=!1,X.current="",Le!==L?We||Ne||I(Le):(Re&&Re(Le,L),(tt||"forward"===He&&Le!==kt||"backward"===He&&0!==Le)&&qt()),function(){clearTimeout(z.current)}}),[L,Le,Re,We,Ne,qt,tt,kt,He]),a((function(){return j&&qt(),function(){clearTimeout(z.current)}}),[j]),a((function(){var e=A.current;function t(){clearTimeout(B.current),clearTimeout(z.current),B.current=setTimeout((function(){C(window.innerWidth)}),400)}return C(window.innerWidth),window.addEventListener("resize",t),function(){clearTimeout(B.current),window.removeEventListener("resize",t),document.removeEventListener("mousemove",$t),document.removeEventListener("mouseup",Gt),document.removeEventListener("touchmove",$t),document.removeEventListener("touchend",Gt),e.removeEventListener("mouseout",Gt),e.removeEventListener("dragstart",Gt)}}),[$t,Gt]),V.current=0,j&&(A.current.style.transform=Bt),e.createElement("div",s({onClickCapture:Rt,style:l({display:"flex",flexFlow:"row wrap",boxSizing:"border-box",justifyContent:"center",width:"100%"},G)},K,{ref:M}),me&&!Ct&&e.createElement("button",s({},he,{type:"button",onClick:(0===zt&&rt||0===Le&&it)&&!tt?void 0:Ut,disabled:"boolean"==typeof he.disabled?he.disabled:!(!(0===zt&&rt||0===Le&&it)||tt)}),fe),e.createElement("div",s({},_,{style:l(l({},Z),{},{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:Tt?"".concat(Tt,"px"):!Tt&&st||j&&!Tt?void 0:0,flex:!Tt&&st||j&&!Tt?"1 0":void 0}),ref:W}),e.createElement("div",s({},le,{style:l(l({},ne),{},{display:"flex",boxSizing:"border-box",outline:"none",transition:Xt,transform:Bt}),"data-transform":Bt,onTouchStart:Pt?void 0:Jt,onMouseDown:Pt?void 0:Ht,onTransitionEnd:We||Ne?Kt:void 0,tabIndex:-1,role:"presentation",ref:A}),!Pt&&tt&&Yt(q.slice(L),L),Yt(q,0,Pt),!Pt&&tt&&Yt(q,0),!Pt&&tt&&Yt(q.slice(0,L),0))),ge&&!Ct&&e.createElement("button",s({},Ee,{type:"button",onClick:(zt===Ot&&rt||Le===kt&&it)&&!tt?void 0:Qt,disabled:"boolean"==typeof Ee.disabled?Ee.disabled:!(!(zt===Ot&&rt||Le===kt&&it)||tt)}),ye),!!mt&&e.createElement("div",s({style:{width:"100%",display:"flex",justifyContent:"center"}},pt),Array.from({length:Math.ceil(q.length/Fe)}).map((function(t,n){return e.createElement("button",s({type:"button",key:n,title:"".concat(n)},yt,Math.min(n*Fe,q.length-1)===Le?gt:{},{onClick:function(){Ft(Math.min(n*Fe,q.length-1),Math.min(n*Fe,q.length-1)>Le?"forward":"backward")}}))}))))}var C=t(j);export{C as default};
+import e,{memo as t,useState as n,useRef as r,Children as i,useCallback as o,useEffect as c}from"react";function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){d(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(){return l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l.apply(this,arguments)}function s(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function f(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,i,o=[],c=!0,a=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(o.push(r.value),!t||o.length!==t);c=!0);}catch(e){a=!0,i=e}finally{try{c||null==n.return||n.return()}finally{if(a)throw i}}return o}(e,t)||v(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function m(e){return function(e){if(Array.isArray(e))return h(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||v(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e,t){if(e){if("string"==typeof e)return h(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?h(e,t):void 0}}function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var p=["responsiveProps"],b=["minWidth","maxWidth"],y=["style","onClickCapture"],w=["style"],g=["style","onTouchStart","onMouseDown","onTransitionEnd"],x=["children","show"],E=["children","show"],S=["className","style"],I=["className","style"],C=["className","onClick","style"],O=["props"];function L(e){var t=e.infinite,n=e.positionIndex,r=e.itemsListRef;return t?m(r.current.children).slice(r.current.children.length/3-n,r.current.children.length/3-n+r.current.children.length/3):m(r.current.children)}function T(e){var t=e.activeSlideIndex,n=e.itemsListRef,r=e.innerRef,i=e.offsetCorrectionForCenterMode,o=e.offsetCorrectionForInfiniteMode,c=e.infinite,a=e.positionIndex,u=e.innerMaxWidth,d=L({infinite:c,positionIndex:a,itemsListRef:n}),l=c?o+i:Math.min(n.current.offsetWidth-(u||r.current.offsetWidth),d.reduce((function(e,n,r){return r<t?e+n.offsetWidth:e}),0)),s=l+(u||r.current.offsetWidth),f=c?[].concat(m(d.slice(t).map((function(e,n){return{slideIndex:n+t,htmlElement:e}}))),m(d.map((function(e,t){return{slideIndex:t,htmlElement:e}}))),m(d.map((function(e,t){return{slideIndex:t,htmlElement:e}}))),m(d.slice(0,t).map((function(e,t){return{slideIndex:t,htmlElement:e}})))):d.map((function(e,t){return{slideIndex:t,htmlElement:e}})),v=f.reduce((function(e,t){var n=t.slideIndex,r=t.htmlElement.offsetWidth;return(e.summ>=l&&e.summ<s||e.summ+r>l&&e.summ+r<=s)&&e.items.push({slideIndex:n,isFullyVisible:e.summ+r<=s&&e.summ>=l}),e.summ+=r,e}),{summ:0,items:[]}),h=!!v.items.find((function(e){return 0===e.slideIndex})),p=!!v.items.find((function(e){return e.slideIndex===d.length-1}));return{visibleSlides:v.items,isFirstSlideVisible:h,isLastSlideVisible:p}}function k(t){var a=t.responsiveProps,d=void 0===a?[]:a,m=s(t,p),v=f(n(0),2),h=v[0],k=v[1],M=f(n(m.activeSlideIndex),2),W=M[0],P=M[1],j=r(null),A=r(null),N=r(null),F=r(0),R=r(!1),D=r(""),X=r(null),V=r(null),z=r(0),B=r(W),q=d.reduce((function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.minWidth,r=void 0===n?0:n,i=t.maxWidth,o=void 0===i?null:i,c=s(t,b);return h>r&&(!o||h<=o)?u(u({},e),c):e}),m),U=i.toArray(q.children),$=h?u(u({},q),{},{activeSlideIndex:Math.max(0,Math.min(q.activeSlideIndex,U.length-1)),itemsToShow:Math.min(U.length,q.itemsToShow||0),itemsToScroll:Math.min(U.length,q.itemsToScroll||1)}):m,G=$.containerProps,H=(G=void 0===G?{}:G).style,J=void 0===H?{}:H,K=G.onClickCapture,Q=void 0===K?null:K,Y=s(G,y),Z=$.innerProps,_=(Z=void 0===Z?{}:Z).style,ee=void 0===_?{}:_,te=s(Z,w),ne=$.itemsListProps,re=(ne=void 0===ne?{}:ne).style,ie=void 0===re?{}:re,oe=ne.onTouchStart,ce=void 0===oe?null:oe,ae=ne.onMouseDown,ue=void 0===ae?null:ae,de=ne.onTransitionEnd,le=void 0===de?null:de,se=s(ne,g),fe=$.backwardBtnProps,me=(fe=void 0===fe?{}:fe).children,ve=void 0===me?null:me,he=fe.show,pe=void 0===he||he,be=s(fe,x),ye=$.forwardBtnProps,we=(ye=void 0===ye?{}:ye).children,ge=void 0===we?null:we,xe=ye.show,Ee=void 0===xe||xe,Se=s(ye,E),Ie=$.activeSlideProps,Ce=(Ie=void 0===Ie?{}:Ie).className,Oe=void 0===Ce?"":Ce,Le=Ie.style,Te=void 0===Le?{}:Le,ke=s(Ie,S),Me=$.visibleSlideProps,We=(Me=void 0===Me?{}:Me).className,Pe=void 0===We?"":We,je=Me.style,Ae=void 0===je?{}:je,Ne=s(Me,I),Fe=$.updateOnItemClick,Re=void 0!==Fe&&Fe,De=$.activeSlideIndex,Xe=$.onRequestChange,Ve=$.speed,ze=void 0===Ve?0:Ve,Be=$.delay,qe=void 0===Be?0:Be,Ue=$.easing,$e=void 0===Ue?"linear":Ue,Ge=$.itemsToShow,He=void 0===Ge?0:Ge,Je=$.itemsToScroll,Ke=void 0===Je?1:Je,Qe=$.children,Ye=$.onAfterChange,Ze=$.autoplay,_e=void 0!==Ze&&Ze,et=$.autoplayDirection,tt=void 0===et?"forward":et,nt=$.disableNavIfAllVisible,rt=void 0===nt||nt,it=$.hideNavIfAllVisible,ot=void 0===it||it,ct=$.centerMode,at=void 0!==ct&&ct,ut=$.infinite,dt=void 0===ut||ut,lt=$.disableNavIfEdgeVisible,st=void 0===lt||lt,ft=$.disableNavIfEdgeActive,mt=void 0===ft||ft,vt=$.dotsNav,ht=void 0===vt?{}:vt,pt=$.persistentChangeCallbacks,bt=void 0!==pt&&pt;$.showSlidesBeforeInit;var yt=ht||{},wt=yt.show,gt=void 0!==wt&&wt,xt=yt.containerProps,Et=void 0===xt?{}:xt,St=yt.itemBtnProps,It=void 0===St?{}:St,Ct=yt.activeItemBtnProps,Ot=void 0===Ct?{}:Ct,Lt=h?L({infinite:dt,positionIndex:B.current,itemsListRef:N}):[],Tt=h&&He?Lt.reduce((function(e,t,n){return n>=De&&n<De+He||n<De&&n<De+He-Lt.length?e+t.offsetWidth:e}),0):0,kt=h?N.current.offsetWidth-(Tt||A.current.offsetWidth):0,Mt=function(e){var t=Lt.reduce((function(t,n,r){return r>=e?t:t+(n.offsetWidth||0)}),0);return dt?t:Math.min(kt,t)},Wt=i.count(Qe)-1,Pt=He===U.length,jt=ot&&Pt,At=rt&&Pt,Nt=De-W!=0,Ft=h&&Nt&&dt?Mt(W):0,Rt=!h||!Nt&&dt?0:Mt(De),Dt=h?Lt[De].offsetWidth:0,Xt=h&&(at&&dt)?-((Tt||A.current.offsetWidth)-Dt)/2:0,Vt=dt&&h?N.current.offsetWidth/3:0,zt=W-De!=0&&N.current?"forward"===D.current.toLowerCase()&&De<W?Vt:"backward"===D.current.toLowerCase()&&De>W?-Vt:0:0,Bt=Nt&&(ze||qe)?"transform ".concat(ze,"ms ").concat($e," ").concat(qe,"ms"):"none",qt=At||!h?0:Rt-Ft+Xt+zt+Vt,Ut=h?"translateX(-".concat(qt,"px)"):"none",$t=h?T({activeSlideIndex:De,itemsListRef:N,innerRef:A,offsetCorrectionForCenterMode:Xt,infinite:dt,positionIndex:B.current,offsetCorrectionForInfiniteMode:Vt,innerMaxWidth:0}):{visibleSlides:[],isFirstSlideVisible:!1,isLastSlideVisible:!1},Gt=o((function(e){if("forward"===e){var t=De+Ke;return t>Wt?dt?t-Wt-1:De:t}if("backward"===e){var n=De-Ke;return n<0?dt?Wt+1+n:De:n}return De}),[De,Ke,Wt,dt]),Ht=o((function(e,t){D.current=t,N.current.style.transition=ze||qe?"transform ".concat(ze,"ms ").concat($e," ").concat(qe,"ms"):"none",e!==De||bt?(clearTimeout(X.current),Xe(e,T({activeSlideIndex:e,positionIndex:W,infinite:dt,innerRef:A,itemsListRef:N,offsetCorrectionForCenterMode:Xt,offsetCorrectionForInfiniteMode:Vt,innerMaxWidth:Tt}))):(F.current=0,N.current.style.transform="translateX(-".concat(Xt+Vt+(dt?0:qt),"px)"))}),[bt,De,Xt,qe,$e,ze,Xe,Vt,dt,qt,W,Tt]),Jt=o((function(){_e&&(clearTimeout(X.current),X.current=setTimeout((function(){Ht(Gt(tt),tt)}),qe))}),[_e,tt,Ht,Gt,qe]),Kt=o((function(e){R.current&&(e.preventDefault(),e.stopPropagation(),Q&&Q(e))}),[Q]),Qt=o((function(){Ht(Gt("backward"),"backward")}),[Ht,Gt]),Yt=o((function(e){R.current=!0;var t=e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX,n=F.current-t+Xt+Vt+(dt?0:qt),r=N.current.offsetWidth-A.current.offsetWidth,i=Math.max(Math.min(0,-n),-r);N.current.style.transition="none",N.current.style.transform="translateX(".concat(i,"px)")}),[Xt,Vt,dt,qt]),Zt=o((function(e){if(N.current.removeEventListener("mouseout",Zt),N.current.removeEventListener("dragstart",Zt),document.removeEventListener("mousemove",Yt),document.removeEventListener("mouseup",Zt),document.removeEventListener("touchmove",Yt),document.removeEventListener("touchend",Zt),R.current){var t=e.changedTouches&&e.changedTouches.length?e.changedTouches[e.changedTouches.length-1].clientX:e.clientX,n=F.current-t;n>Dt/2?Ht(Gt("forward"),"forward"):n<-Dt/2?Ht(Gt("backward"),"backward"):Ht(De,"forward")}}),[De,Dt,Ht,Gt,Yt]),_t=o((function(e){clearTimeout(X.current),R.current||(F.current=e.clientX,document.addEventListener("mousemove",Yt),document.addEventListener("mouseup",Zt),N.current.addEventListener("mouseout",Zt),N.current.addEventListener("dragstart",Zt)),ue&&ue(e)}),[Yt,Zt,ue]),en=o((function(e){clearTimeout(X.current),R.current||(F.current=e.touches[0].clientX,document.addEventListener("touchmove",Yt),document.addEventListener("touchend",Zt)),ce&&ce(e)}),[Yt,Zt,ce]),tn=o((function(e){P(De),le&&le(e)}),[De,le]),nn=o((function(){Ht(Gt("forward"),"forward")}),[Ht,Gt]),rn=function(e,t,n){return e.map((function(e,r){var i=e.props,o=(i=void 0===i?{}:i).className,c=void 0===o?"":o,a=i.onClick,d=void 0===a?null:a,l=i.style,f=void 0===l?{}:l,m=s(i,C),v=s(e,O),h=dt?z.current>=U.length?"forward":"backward":r>=De?"forward":"backward",p=r+t===De,b=$t.visibleSlides.find((function(e){return e.slideIndex===r+t})),y="".concat(c," ").concat(h," ").concat(p?Oe:""," ").concat(b?Pe:""),w=u(u(u(u({},f),b?Ae:{}),p?Te:{}),{},{boxSizing:"border-box",margin:0}),g=!n&&Re?function(e){var t=e.direction,n=e.index,r=e.onClick;return function(e){Ht(n,t||(De<n?"forward":"")||(De>n?"backward":"")),r&&r(e)}}({direction:h,index:r+t,onClick:d}):d,x=u(u(u({role:"tabpanel",className:y,style:w,onClick:g},m),b?Ne:{}),p?ke:{});return z.current+=1,u({props:x},v)}))};return c((function(){return F.current=0,W===De&&(R.current=!1),D.current="",De!==W?ze||qe||P(De):(Ye&&Ye(De,W),(dt||"forward"===tt&&De!==Wt||"backward"===tt&&0!==De)&&Jt()),function(){clearTimeout(X.current)}}),[W,De,Ye,ze,qe,Jt,dt,Wt,tt]),c((function(){return h&&Jt(),function(){clearTimeout(X.current)}}),[h]),c((function(){var e=N.current;function t(){clearTimeout(V.current),clearTimeout(X.current),V.current=setTimeout((function(){h!==window.innerWidth&&k(window.innerWidth)}),400)}return h!==window.innerWidth&&k(window.innerWidth),window.addEventListener("resize",t),function(){clearTimeout(V.current),window.removeEventListener("resize",t),document.removeEventListener("mousemove",Yt),document.removeEventListener("mouseup",Zt),document.removeEventListener("touchmove",Yt),document.removeEventListener("touchend",Zt),e.removeEventListener("mouseout",Zt),e.removeEventListener("dragstart",Zt)}}),[Yt,Zt]),z.current=0,B.current=W,e.createElement("div",l({onClickCapture:Kt,style:u({display:"flex",flexFlow:"row wrap",boxSizing:"border-box",justifyContent:"center",width:"100%"},J)},Y,{ref:j}),pe&&!jt&&e.createElement("button",l({},be,{type:"button",onClick:(0===qt&&st||0===De&&mt)&&!dt?void 0:Qt,disabled:"boolean"==typeof be.disabled?be.disabled:!(!(0===qt&&st||0===De&&mt)||dt)}),ve),e.createElement("div",l({},te,{style:u(u({},ee),{},{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:Tt?"".concat(Tt,"px"):void 0,flex:Tt?void 0:"1 0"}),ref:A}),e.createElement("div",l({},se,{style:u(u({},ie),{},{display:"flex",boxSizing:"border-box",outline:"none",transition:Bt,transform:Ut}),"data-transform":Ut,onTouchStart:At?void 0:en,onMouseDown:At?void 0:_t,onTransitionEnd:ze||qe?tn:void 0,tabIndex:-1,role:"presentation",ref:N}),dt&&rn(U.slice(W),W,At),rn(U,0,At),dt&&rn(U,0,At),dt&&rn(U.slice(0,W),0,At))),Ee&&!jt&&e.createElement("button",l({},Se,{type:"button",onClick:(qt===kt&&st||De===Wt&&mt)&&!dt?void 0:nn,disabled:"boolean"==typeof Se.disabled?Se.disabled:!(!(qt===kt&&st||De===Wt&&mt)||dt)}),ge),!!gt&&e.createElement("div",l({style:{width:"100%",display:"flex",justifyContent:"center"}},Et),Array.from({length:Math.ceil(U.length/Ke)}).map((function(t,n){return e.createElement("button",l({type:"button",key:n,title:"".concat(n)},It,Math.min(n*Ke,U.length-1)===De?Ot:{},{onClick:function(){Ht(Math.min(n*Ke,U.length-1),Math.min(n*Ke,U.length-1)>De?"forward":"backward")}}))}))))}var M=t(k);export{M as default};

dist/index.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).ReactSimplyCarousel=t(e.React)}(this,(function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(){return a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},a.apply(this,arguments)}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,i=[],a=!0,c=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(c)throw o}}return i}(e,t)||d(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e){return function(e){if(Array.isArray(e))return s(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||d(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,t){if(e){if("string"==typeof e)return s(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(e,t):void 0}}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var f=["responsiveProps"],v=["minWidth","maxWidth"],m=["style","onClickCapture"],h=["style"],b=["style","onTouchStart","onMouseDown","onTransitionEnd"],p=["children","show"],y=["children","show"],w=["className","style"],g=["className","onClick","style"],E=["props"];function k(t){var r=t.responsiveProps,i=void 0===r?[]:r,d=c(t,f),s=u(e.useState(0),2),k=s[0],C=s[1],x=u(e.useState(d.activeSlideIndex),2),S=x[0],O=x[1],T=e.useRef(null),j=e.useRef(null),P=e.useRef(null),L=e.useRef(0),M=e.useRef(!1),I=e.useRef(""),W=e.useRef(null),A=e.useRef(null),R=e.useRef(0),N=i.reduce((function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.minWidth,r=void 0===n?0:n,i=t.maxWidth,a=void 0===i?null:i,u=c(t,v);return k>r&&(!a||k<=a)?o(o({},e),u):e}),d),D=e.Children.toArray(N.children),X=k?o(o({},N),{},{activeSlideIndex:Math.max(0,Math.min(N.activeSlideIndex,D.length-1)),itemsToShow:Math.min(D.length,N.itemsToShow||0),itemsToScroll:Math.min(D.length,N.itemsToScroll||1)}):d,z=X.containerProps,B=(z=void 0===z?{}:z).style,V=void 0===B?{}:B,q=z.onClickCapture,F=void 0===q?null:q,U=c(z,m),$=X.innerProps,G=($=void 0===$?{}:$).style,H=void 0===G?{}:G,J=c($,h),K=X.itemsListProps,Q=(K=void 0===K?{}:K).style,Y=void 0===Q?{}:Q,Z=K.onTouchStart,_=void 0===Z?null:Z,ee=K.onMouseDown,te=void 0===ee?null:ee,ne=K.onTransitionEnd,re=void 0===ne?null:ne,oe=c(K,b),ie=X.backwardBtnProps,ae=(ie=void 0===ie?{}:ie).children,ce=void 0===ae?null:ae,ue=ie.show,le=void 0===ue||ue,de=c(ie,p),se=X.forwardBtnProps,fe=(se=void 0===se?{}:se).children,ve=void 0===fe?null:fe,me=se.show,he=void 0===me||me,be=c(se,y),pe=X.activeSlideProps,ye=(pe=void 0===pe?{}:pe).className,we=void 0===ye?"":ye,ge=pe.style,Ee=void 0===ge?{}:ge,ke=c(pe,w),Ce=X.updateOnItemClick,xe=void 0!==Ce&&Ce,Se=X.activeSlideIndex,Oe=X.onRequestChange,Te=X.speed,je=void 0===Te?0:Te,Pe=X.delay,Le=void 0===Pe?0:Pe,Me=X.easing,Ie=void 0===Me?"linear":Me,We=X.itemsToShow,Ae=void 0===We?0:We,Re=X.itemsToScroll,Ne=void 0===Re?1:Re,De=X.children,Xe=X.onAfterChange,ze=X.autoplay,Be=void 0!==ze&&ze,Ve=X.autoplayDirection,qe=void 0===Ve?"forward":Ve,Fe=X.disableNavIfAllVisible,Ue=void 0===Fe||Fe,$e=X.hideNavIfAllVisible,Ge=void 0===$e||$e,He=X.centerMode,Je=void 0!==He&&He,Ke=X.infinite,Qe=void 0===Ke||Ke,Ye=X.disableNavIfEdgeVisible,Ze=void 0===Ye||Ye,_e=X.disableNavIfEdgeActive,et=void 0===_e||_e,tt=X.dotsNav,nt=void 0===tt?{}:tt,rt=X.persistentChangeCallbacks,ot=void 0!==rt&&rt,it=X.showSlidesBeforeInit,at=void 0!==it&&it,ct=nt||{},ut=ct.show,lt=void 0!==ut&&ut,dt=ct.containerProps,st=void 0===dt?{}:dt,ft=ct.itemBtnProps,vt=void 0===ft?{}:ft,mt=ct.activeItemBtnProps,ht=void 0===mt?{}:mt,bt=k?l(P.current.children):[],pt=e.useMemo((function(){return k?Qe?bt.slice(D.length-S,D.length-S+D.length):bt:[]}),[S,D.length,k,Qe,bt]),yt=k?P.current.offsetWidth-j.current.offsetWidth:0,wt=function(e){var t=pt.reduce((function(t,n,r){return r>=e?t:t+(n.offsetWidth||0)}),0);return Qe?t:Math.min(yt,t)},gt=e.useMemo((function(){return k&&Ae?pt.reduce((function(e,t,n){return n>=Se&&n<Se+Ae||n<Se&&n<Se+Ae-pt.length?e+t.offsetWidth:e}),0):0}),[Se,Ae,pt,k]),Et=e.Children.count(De)-1,kt=Ae===D.length,Ct=Ge&&kt,xt=Ue&&kt,St=Se-S!=0,Ot=k&&St&&Qe?wt(S):0,Tt=!k||!St&&Qe?0:wt(Se),jt=k?pt[Se].offsetWidth:0,Pt=k&&(Je&&Qe)?-(Math.min(gt||j.current.offsetWidth,j.current.offsetWidth)-jt)/2:0,Lt=e.useMemo((function(){return Qe&&k?P.current.offsetWidth/3:0}),[k,Qe]),Mt=S-Se!=0&&P.current?"forward"===I.current.toLowerCase()&&Se<S?Lt:"backward"===I.current.toLowerCase()&&Se>S?-Lt:0:0,It=St&&(je||Le)?"transform ".concat(je,"ms ").concat(Ie," ").concat(Le,"ms"):"none",Wt=xt||!k?0:Tt-Ot+Pt+Mt+Lt,At=k?"translateX(-".concat(Wt,"px)"):"none",Rt=e.useCallback((function(e){if("forward"===e){var t=Se+Ne;return t>Et?Qe?t-Et-1:Se:t}if("backward"===e){var n=Se-Ne;return n<0?Qe?Et+1+n:Se:n}return Se}),[Se,Ne,Et,Qe]),Nt=e.useCallback((function(e,t){I.current=t,P.current.style.transition=je||Le?"transform ".concat(je,"ms ").concat(Ie," ").concat(Le,"ms"):"none",e!==Se||ot?(clearTimeout(W.current),Oe(e)):(L.current=0,M.current=!1,P.current.style.transform="translateX(-".concat(Pt+Lt+(Qe?0:Wt),"px)"))}),[ot,Se,Pt,Le,Ie,je,Oe,Lt,Qe,Wt]),Dt=e.useCallback((function(){Be&&(clearTimeout(W.current),W.current=setTimeout((function(){Nt(Rt(qe),qe)}),Le))}),[Be,qe,Nt,Rt,Le]),Xt=e.useCallback((function(e){M.current&&(e.preventDefault(),e.stopPropagation(),F&&F(e))}),[F]),zt=e.useCallback((function(){Nt(Rt("backward"),"backward")}),[Nt,Rt]),Bt=e.useCallback((function(e){M.current=!0;var t=e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX,n=L.current-t+Pt+Lt+(Qe?0:Wt),r=P.current.offsetWidth-j.current.offsetWidth,o=Math.max(Math.min(0,-n),-r);P.current.style.transition="none",P.current.style.transform="translateX(".concat(o,"px)")}),[Pt,Lt,Qe,Wt]),Vt=e.useCallback((function(e){if(P.current.removeEventListener("mouseout",Vt),P.current.removeEventListener("dragstart",Vt),document.removeEventListener("mousemove",Bt),document.removeEventListener("mouseup",Vt),document.removeEventListener("touchmove",Bt),document.removeEventListener("touchend",Vt),M.current){var t=e.changedTouches&&e.changedTouches.length?e.changedTouches[e.changedTouches.length-1].clientX:e.clientX,n=L.current-t;n>jt/2?Nt(Rt("forward"),"forward"):n<-jt/2?Nt(Rt("backward"),"backward"):Nt(Se,"forward")}}),[Se,jt,Nt,Rt,Bt]),qt=e.useCallback((function(e){clearTimeout(W.current),M.current||(L.current=e.clientX,document.addEventListener("mousemove",Bt),document.addEventListener("mouseup",Vt),P.current.addEventListener("mouseout",Vt),P.current.addEventListener("dragstart",Vt)),te&&te(e)}),[Bt,Vt]),Ft=e.useCallback((function(e){clearTimeout(W.current),M.current||(L.current=e.touches[0].clientX,document.addEventListener("touchmove",Bt),document.addEventListener("touchend",Vt)),_&&_(e)}),[Bt,Vt]),Ut=e.useCallback((function(e){O(Se),re&&re(e)}),[Se]),$t=e.useCallback((function(){Nt(Rt("forward"),"forward")}),[Nt,Rt]),Gt=function(e,t,n){return e.map((function(e,r){var i=e.props,a=(i=void 0===i?{}:i).className,u=void 0===a?"":a,l=i.onClick,d=void 0===l?null:l,s=i.style,f=void 0===s?{}:s,v=c(i,g),m=c(e,E),h=Qe?R.current>=D.length?"forward":"backward":r>=Se?"forward":"backward",b=r+t===Se,p="".concat(u," ").concat(h," ").concat(b?we:""),y=o(o(o({},f),b?Ee:{}),{},{boxSizing:"border-box",margin:0}),w=!n&&xe?function(e){var t=e.direction,n=e.index,r=e.onClick;return function(e){Nt(n,t||(Se<n?"forward":"")||(Se>n?"backward":"")),r&&r(e)}}({direction:h,index:r+t,onClick:d}):d,k=o(o({role:"tabpanel",className:p,style:y,onClick:w},v),b?ke:{});return R.current+=1,o({props:k},m)}))};return e.useEffect((function(){return L.current=0,M.current=!1,I.current="",Se!==S?je||Le||O(Se):(Xe&&Xe(Se,S),(Qe||"forward"===qe&&Se!==Et||"backward"===qe&&0!==Se)&&Dt()),function(){clearTimeout(W.current)}}),[S,Se,Xe,je,Le,Dt,Qe,Et,qe]),e.useEffect((function(){return k&&Dt(),function(){clearTimeout(W.current)}}),[k]),e.useEffect((function(){var e=P.current;function t(){clearTimeout(A.current),clearTimeout(W.current),A.current=setTimeout((function(){C(window.innerWidth)}),400)}return C(window.innerWidth),window.addEventListener("resize",t),function(){clearTimeout(A.current),window.removeEventListener("resize",t),document.removeEventListener("mousemove",Bt),document.removeEventListener("mouseup",Vt),document.removeEventListener("touchmove",Bt),document.removeEventListener("touchend",Vt),e.removeEventListener("mouseout",Vt),e.removeEventListener("dragstart",Vt)}}),[Bt,Vt]),R.current=0,k&&(P.current.style.transform=At),n.default.createElement("div",a({onClickCapture:Xt,style:o({display:"flex",flexFlow:"row wrap",boxSizing:"border-box",justifyContent:"center",width:"100%"},V)},U,{ref:T}),le&&!Ct&&n.default.createElement("button",a({},de,{type:"button",onClick:(0===Wt&&Ze||0===Se&&et)&&!Qe?void 0:zt,disabled:"boolean"==typeof de.disabled?de.disabled:!(!(0===Wt&&Ze||0===Se&&et)||Qe)}),ce),n.default.createElement("div",a({},J,{style:o(o({},H),{},{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:gt?"".concat(gt,"px"):!gt&&at||k&&!gt?void 0:0,flex:!gt&&at||k&&!gt?"1 0":void 0}),ref:j}),n.default.createElement("div",a({},oe,{style:o(o({},Y),{},{display:"flex",boxSizing:"border-box",outline:"none",transition:It,transform:At}),"data-transform":At,onTouchStart:xt?void 0:Ft,onMouseDown:xt?void 0:qt,onTransitionEnd:je||Le?Ut:void 0,tabIndex:-1,role:"presentation",ref:P}),!xt&&Qe&&Gt(D.slice(S),S),Gt(D,0,xt),!xt&&Qe&&Gt(D,0),!xt&&Qe&&Gt(D.slice(0,S),0))),he&&!Ct&&n.default.createElement("button",a({},be,{type:"button",onClick:(Wt===yt&&Ze||Se===Et&&et)&&!Qe?void 0:$t,disabled:"boolean"==typeof be.disabled?be.disabled:!(!(Wt===yt&&Ze||Se===Et&&et)||Qe)}),ve),!!lt&&n.default.createElement("div",a({style:{width:"100%",display:"flex",justifyContent:"center"}},st),Array.from({length:Math.ceil(D.length/Ne)}).map((function(e,t){return n.default.createElement("button",a({type:"button",key:t,title:"".concat(t)},vt,Math.min(t*Ne,D.length-1)===Se?ht:{},{onClick:function(){Nt(Math.min(t*Ne,D.length-1),Math.min(t*Ne,D.length-1)>Se?"forward":"backward")}}))}))))}return e.memo(k)}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).ReactSimplyCarousel=t(e.React)}(this,(function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(){return c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c.apply(this,arguments)}function u(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,i,o=[],c=!0,u=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(o.push(r.value),!t||o.length!==t);c=!0);}catch(e){u=!0,i=e}finally{try{c||null==n.return||n.return()}finally{if(u)throw i}}return o}(e,t)||s(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e){return function(e){if(Array.isArray(e))return d(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||s(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,t){if(e){if("string"==typeof e)return d(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?d(e,t):void 0}}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var f=["responsiveProps"],m=["minWidth","maxWidth"],v=["style","onClickCapture"],h=["style"],b=["style","onTouchStart","onMouseDown","onTransitionEnd"],p=["children","show"],y=["children","show"],w=["className","style"],g=["className","style"],x=["className","onClick","style"],C=["props"];function E(e){var t=e.infinite,n=e.positionIndex,r=e.itemsListRef;return t?l(r.current.children).slice(r.current.children.length/3-n,r.current.children.length/3-n+r.current.children.length/3):l(r.current.children)}function S(e){var t=e.activeSlideIndex,n=e.itemsListRef,r=e.innerRef,i=e.offsetCorrectionForCenterMode,o=e.offsetCorrectionForInfiniteMode,c=e.infinite,u=e.positionIndex,a=e.innerMaxWidth,s=E({infinite:c,positionIndex:u,itemsListRef:n}),d=c?o+i:Math.min(n.current.offsetWidth-(a||r.current.offsetWidth),s.reduce((function(e,n,r){return r<t?e+n.offsetWidth:e}),0)),f=d+(a||r.current.offsetWidth),m=c?[].concat(l(s.slice(t).map((function(e,n){return{slideIndex:n+t,htmlElement:e}}))),l(s.map((function(e,t){return{slideIndex:t,htmlElement:e}}))),l(s.map((function(e,t){return{slideIndex:t,htmlElement:e}}))),l(s.slice(0,t).map((function(e,t){return{slideIndex:t,htmlElement:e}})))):s.map((function(e,t){return{slideIndex:t,htmlElement:e}})),v=m.reduce((function(e,t){var n=t.slideIndex,r=t.htmlElement.offsetWidth;return(e.summ>=d&&e.summ<f||e.summ+r>d&&e.summ+r<=f)&&e.items.push({slideIndex:n,isFullyVisible:e.summ+r<=f&&e.summ>=d}),e.summ+=r,e}),{summ:0,items:[]}),h=!!v.items.find((function(e){return 0===e.slideIndex})),b=!!v.items.find((function(e){return e.slideIndex===s.length-1}));return{visibleSlides:v.items,isFirstSlideVisible:h,isLastSlideVisible:b}}function I(t){var r=t.responsiveProps,o=void 0===r?[]:r,l=u(t,f),s=a(e.useState(0),2),d=s[0],I=s[1],k=a(e.useState(l.activeSlideIndex),2),O=k[0],L=k[1],T=e.useRef(null),j=e.useRef(null),M=e.useRef(null),W=e.useRef(0),P=e.useRef(!1),R=e.useRef(""),A=e.useRef(null),N=e.useRef(null),F=e.useRef(0),D=e.useRef(O),X=o.reduce((function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.minWidth,r=void 0===n?0:n,o=t.maxWidth,c=void 0===o?null:o,a=u(t,m);return d>r&&(!c||d<=c)?i(i({},e),a):e}),l),V=e.Children.toArray(X.children),z=d?i(i({},X),{},{activeSlideIndex:Math.max(0,Math.min(X.activeSlideIndex,V.length-1)),itemsToShow:Math.min(V.length,X.itemsToShow||0),itemsToScroll:Math.min(V.length,X.itemsToScroll||1)}):l,B=z.containerProps,q=(B=void 0===B?{}:B).style,U=void 0===q?{}:q,$=B.onClickCapture,G=void 0===$?null:$,H=u(B,v),J=z.innerProps,K=(J=void 0===J?{}:J).style,Q=void 0===K?{}:K,Y=u(J,h),Z=z.itemsListProps,_=(Z=void 0===Z?{}:Z).style,ee=void 0===_?{}:_,te=Z.onTouchStart,ne=void 0===te?null:te,re=Z.onMouseDown,ie=void 0===re?null:re,oe=Z.onTransitionEnd,ce=void 0===oe?null:oe,ue=u(Z,b),ae=z.backwardBtnProps,le=(ae=void 0===ae?{}:ae).children,se=void 0===le?null:le,de=ae.show,fe=void 0===de||de,me=u(ae,p),ve=z.forwardBtnProps,he=(ve=void 0===ve?{}:ve).children,be=void 0===he?null:he,pe=ve.show,ye=void 0===pe||pe,we=u(ve,y),ge=z.activeSlideProps,xe=(ge=void 0===ge?{}:ge).className,Ce=void 0===xe?"":xe,Ee=ge.style,Se=void 0===Ee?{}:Ee,Ie=u(ge,w),ke=z.visibleSlideProps,Oe=(ke=void 0===ke?{}:ke).className,Le=void 0===Oe?"":Oe,Te=ke.style,je=void 0===Te?{}:Te,Me=u(ke,g),We=z.updateOnItemClick,Pe=void 0!==We&&We,Re=z.activeSlideIndex,Ae=z.onRequestChange,Ne=z.speed,Fe=void 0===Ne?0:Ne,De=z.delay,Xe=void 0===De?0:De,Ve=z.easing,ze=void 0===Ve?"linear":Ve,Be=z.itemsToShow,qe=void 0===Be?0:Be,Ue=z.itemsToScroll,$e=void 0===Ue?1:Ue,Ge=z.children,He=z.onAfterChange,Je=z.autoplay,Ke=void 0!==Je&&Je,Qe=z.autoplayDirection,Ye=void 0===Qe?"forward":Qe,Ze=z.disableNavIfAllVisible,_e=void 0===Ze||Ze,et=z.hideNavIfAllVisible,tt=void 0===et||et,nt=z.centerMode,rt=void 0!==nt&&nt,it=z.infinite,ot=void 0===it||it,ct=z.disableNavIfEdgeVisible,ut=void 0===ct||ct,at=z.disableNavIfEdgeActive,lt=void 0===at||at,st=z.dotsNav,dt=void 0===st?{}:st,ft=z.persistentChangeCallbacks,mt=void 0!==ft&&ft;z.showSlidesBeforeInit;var vt=dt||{},ht=vt.show,bt=void 0!==ht&&ht,pt=vt.containerProps,yt=void 0===pt?{}:pt,wt=vt.itemBtnProps,gt=void 0===wt?{}:wt,xt=vt.activeItemBtnProps,Ct=void 0===xt?{}:xt,Et=d?E({infinite:ot,positionIndex:D.current,itemsListRef:M}):[],St=d&&qe?Et.reduce((function(e,t,n){return n>=Re&&n<Re+qe||n<Re&&n<Re+qe-Et.length?e+t.offsetWidth:e}),0):0,It=d?M.current.offsetWidth-(St||j.current.offsetWidth):0,kt=function(e){var t=Et.reduce((function(t,n,r){return r>=e?t:t+(n.offsetWidth||0)}),0);return ot?t:Math.min(It,t)},Ot=e.Children.count(Ge)-1,Lt=qe===V.length,Tt=tt&&Lt,jt=_e&&Lt,Mt=Re-O!=0,Wt=d&&Mt&&ot?kt(O):0,Pt=!d||!Mt&&ot?0:kt(Re),Rt=d?Et[Re].offsetWidth:0,At=d&&(rt&&ot)?-((St||j.current.offsetWidth)-Rt)/2:0,Nt=ot&&d?M.current.offsetWidth/3:0,Ft=O-Re!=0&&M.current?"forward"===R.current.toLowerCase()&&Re<O?Nt:"backward"===R.current.toLowerCase()&&Re>O?-Nt:0:0,Dt=Mt&&(Fe||Xe)?"transform ".concat(Fe,"ms ").concat(ze," ").concat(Xe,"ms"):"none",Xt=jt||!d?0:Pt-Wt+At+Ft+Nt,Vt=d?"translateX(-".concat(Xt,"px)"):"none",zt=d?S({activeSlideIndex:Re,itemsListRef:M,innerRef:j,offsetCorrectionForCenterMode:At,infinite:ot,positionIndex:D.current,offsetCorrectionForInfiniteMode:Nt,innerMaxWidth:0}):{visibleSlides:[],isFirstSlideVisible:!1,isLastSlideVisible:!1},Bt=e.useCallback((function(e){if("forward"===e){var t=Re+$e;return t>Ot?ot?t-Ot-1:Re:t}if("backward"===e){var n=Re-$e;return n<0?ot?Ot+1+n:Re:n}return Re}),[Re,$e,Ot,ot]),qt=e.useCallback((function(e,t){R.current=t,M.current.style.transition=Fe||Xe?"transform ".concat(Fe,"ms ").concat(ze," ").concat(Xe,"ms"):"none",e!==Re||mt?(clearTimeout(A.current),Ae(e,S({activeSlideIndex:e,positionIndex:O,infinite:ot,innerRef:j,itemsListRef:M,offsetCorrectionForCenterMode:At,offsetCorrectionForInfiniteMode:Nt,innerMaxWidth:St}))):(W.current=0,M.current.style.transform="translateX(-".concat(At+Nt+(ot?0:Xt),"px)"))}),[mt,Re,At,Xe,ze,Fe,Ae,Nt,ot,Xt,O,St]),Ut=e.useCallback((function(){Ke&&(clearTimeout(A.current),A.current=setTimeout((function(){qt(Bt(Ye),Ye)}),Xe))}),[Ke,Ye,qt,Bt,Xe]),$t=e.useCallback((function(e){P.current&&(e.preventDefault(),e.stopPropagation(),G&&G(e))}),[G]),Gt=e.useCallback((function(){qt(Bt("backward"),"backward")}),[qt,Bt]),Ht=e.useCallback((function(e){P.current=!0;var t=e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX,n=W.current-t+At+Nt+(ot?0:Xt),r=M.current.offsetWidth-j.current.offsetWidth,i=Math.max(Math.min(0,-n),-r);M.current.style.transition="none",M.current.style.transform="translateX(".concat(i,"px)")}),[At,Nt,ot,Xt]),Jt=e.useCallback((function(e){if(M.current.removeEventListener("mouseout",Jt),M.current.removeEventListener("dragstart",Jt),document.removeEventListener("mousemove",Ht),document.removeEventListener("mouseup",Jt),document.removeEventListener("touchmove",Ht),document.removeEventListener("touchend",Jt),P.current){var t=e.changedTouches&&e.changedTouches.length?e.changedTouches[e.changedTouches.length-1].clientX:e.clientX,n=W.current-t;n>Rt/2?qt(Bt("forward"),"forward"):n<-Rt/2?qt(Bt("backward"),"backward"):qt(Re,"forward")}}),[Re,Rt,qt,Bt,Ht]),Kt=e.useCallback((function(e){clearTimeout(A.current),P.current||(W.current=e.clientX,document.addEventListener("mousemove",Ht),document.addEventListener("mouseup",Jt),M.current.addEventListener("mouseout",Jt),M.current.addEventListener("dragstart",Jt)),ie&&ie(e)}),[Ht,Jt,ie]),Qt=e.useCallback((function(e){clearTimeout(A.current),P.current||(W.current=e.touches[0].clientX,document.addEventListener("touchmove",Ht),document.addEventListener("touchend",Jt)),ne&&ne(e)}),[Ht,Jt,ne]),Yt=e.useCallback((function(e){L(Re),ce&&ce(e)}),[Re,ce]),Zt=e.useCallback((function(){qt(Bt("forward"),"forward")}),[qt,Bt]),_t=function(e,t,n){return e.map((function(e,r){var o=e.props,c=(o=void 0===o?{}:o).className,a=void 0===c?"":c,l=o.onClick,s=void 0===l?null:l,d=o.style,f=void 0===d?{}:d,m=u(o,x),v=u(e,C),h=ot?F.current>=V.length?"forward":"backward":r>=Re?"forward":"backward",b=r+t===Re,p=zt.visibleSlides.find((function(e){return e.slideIndex===r+t})),y="".concat(a," ").concat(h," ").concat(b?Ce:""," ").concat(p?Le:""),w=i(i(i(i({},f),p?je:{}),b?Se:{}),{},{boxSizing:"border-box",margin:0}),g=!n&&Pe?function(e){var t=e.direction,n=e.index,r=e.onClick;return function(e){qt(n,t||(Re<n?"forward":"")||(Re>n?"backward":"")),r&&r(e)}}({direction:h,index:r+t,onClick:s}):s,E=i(i(i({role:"tabpanel",className:y,style:w,onClick:g},m),p?Me:{}),b?Ie:{});return F.current+=1,i({props:E},v)}))};return e.useEffect((function(){return W.current=0,O===Re&&(P.current=!1),R.current="",Re!==O?Fe||Xe||L(Re):(He&&He(Re,O),(ot||"forward"===Ye&&Re!==Ot||"backward"===Ye&&0!==Re)&&Ut()),function(){clearTimeout(A.current)}}),[O,Re,He,Fe,Xe,Ut,ot,Ot,Ye]),e.useEffect((function(){return d&&Ut(),function(){clearTimeout(A.current)}}),[d]),e.useEffect((function(){var e=M.current;function t(){clearTimeout(N.current),clearTimeout(A.current),N.current=setTimeout((function(){d!==window.innerWidth&&I(window.innerWidth)}),400)}return d!==window.innerWidth&&I(window.innerWidth),window.addEventListener("resize",t),function(){clearTimeout(N.current),window.removeEventListener("resize",t),document.removeEventListener("mousemove",Ht),document.removeEventListener("mouseup",Jt),document.removeEventListener("touchmove",Ht),document.removeEventListener("touchend",Jt),e.removeEventListener("mouseout",Jt),e.removeEventListener("dragstart",Jt)}}),[Ht,Jt]),F.current=0,D.current=O,n.default.createElement("div",c({onClickCapture:$t,style:i({display:"flex",flexFlow:"row wrap",boxSizing:"border-box",justifyContent:"center",width:"100%"},U)},H,{ref:T}),fe&&!Tt&&n.default.createElement("button",c({},me,{type:"button",onClick:(0===Xt&&ut||0===Re&&lt)&&!ot?void 0:Gt,disabled:"boolean"==typeof me.disabled?me.disabled:!(!(0===Xt&&ut||0===Re&&lt)||ot)}),se),n.default.createElement("div",c({},Y,{style:i(i({},Q),{},{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:St?"".concat(St,"px"):void 0,flex:St?void 0:"1 0"}),ref:j}),n.default.createElement("div",c({},ue,{style:i(i({},ee),{},{display:"flex",boxSizing:"border-box",outline:"none",transition:Dt,transform:Vt}),"data-transform":Vt,onTouchStart:jt?void 0:Qt,onMouseDown:jt?void 0:Kt,onTransitionEnd:Fe||Xe?Yt:void 0,tabIndex:-1,role:"presentation",ref:M}),ot&&_t(V.slice(O),O,jt),_t(V,0,jt),ot&&_t(V,0,jt),ot&&_t(V.slice(0,O),0,jt))),ye&&!Tt&&n.default.createElement("button",c({},we,{type:"button",onClick:(Xt===It&&ut||Re===Ot&&lt)&&!ot?void 0:Zt,disabled:"boolean"==typeof we.disabled?we.disabled:!(!(Xt===It&&ut||Re===Ot&&lt)||ot)}),be),!!bt&&n.default.createElement("div",c({style:{width:"100%",display:"flex",justifyContent:"center"}},yt),Array.from({length:Math.ceil(V.length/$e)}).map((function(e,t){return n.default.createElement("button",c({type:"button",key:t,title:"".concat(t)},gt,Math.min(t*$e,V.length-1)===Re?Ct:{},{onClick:function(){qt(Math.min(t*$e,V.length-1),Math.min(t*$e,V.length-1)>Re?"forward":"backward")}}))}))))}return e.memo(I)}));

package.json

 {
   "name": "react-simply-carousel",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "description": "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",
@@ -5,0 +5,0 @@ "files": [

README.md

@@ -134,32 +134,33 @@ # react-simply-carousel
 
-| Name                                                              | Type                                 | Default Value                 | Description                                                                                                                                                                                                                                                                              |
-| ----------------------------------------------------------------- | ------------------------------------ | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **activeSlideIndex**                                              | number                               |                               | Index of active slide                                                                                                                                                                                                                                                                    |
-| **activeSlideProps**                                              | object                               | `{}`                          | DOM props for active slide element                                                                                                                                                                                                                                                       |
-| **autoplay**                                                      | boolean                              | `false`                       |                                                                                                                                                                                                                                                                                          |
-| **autoplayDirection**                                             | string (`'forward'` or `'backward'`) | `'forward'`                   |                                                                                                                                                                                                                                                                                          |
-| **backwardBtnProps**                                              | object                               | `{}`                          | DOM props for carousel backward nav button element (include boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens))                                                                                                                       |
-| **children**                                                      | node                                 | `null`                        | slides array                                                                                                                                                                                                                                                                             |
-| **containerProps**                                                | object                               | `{}`                          | DOM props for carousel container div element                                                                                                                                                                                                                                             |
-| **delay**                                                         | number                               | `0`                           | Slide change delay (css transition delay) in ms                                                                                                                                                                                                                                          |
-| **disableNavIfAllVisible**                                        | boolean                              | `true`                        | Disable carousel nav if all slides is visible                                                                                                                                                                                                                                            |
-| **easing**                                                        | string                               | `'linear'`                    | Slide change easing (css transition easing)                                                                                                                                                                                                                                              |
-| **forwardBtnProps**                                               | object                               | `{}`                          | DOM props for carousel forward nav button element (include boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens))                                                                                                                        |
-| **hideNavIfAllVisible**                                           | boolean                              | `true`                        | Hide nav buttons if all slides is visible                                                                                                                                                                                                                                                |
-| **innerProps**                                                    | object                               | `{}`                          | DOM props for inner div element                                                                                                                                                                                                                                                          |
-| **itemsListProps**                                                | object                               | `{}`                          | DOM props for items list div element                                                                                                                                                                                                                                                     |
-| **itemsToScroll**                                                 | number                               | `1`                           | How many slides to scroll at once                                                                                                                                                                                                                                                        |
-| **itemsToShow**                                                   | number                               | `0` (automaticaly calculated) | How many slides to show                                                                                                                                                                                                                                                                  |
-| **onAfterChange**                                                 | function                             | `null`                        | activeSlideIndex change callback                                                                                                                                                                                                                                                         |
-| **onRequestChange**                                               | function                             |                               | Callback to handle every time the active slide changes, receives the new active index as arguments.                                                                                                                                                                                      |
-| **responsiveProps**                                               | Array of objects                     | `[]`                          | carousel props for different window width. For example: `[{minWidth: 768, maxWidth: 992, itemsToShow: 3}, {maxWidth: 767, itemsToShow: 1}]` will show only one slide when window width is less than 767px and show 3 slides when window width is >= 768px and < 992px                    |
-| **speed**                                                         | number                               | `0`                           | Carousel scroll speed (css transition speed) in ms                                                                                                                                                                                                                                       |
-| **updateOnItemClick**                                             | boolean                              | `false`                       | Update active item index after click on some slide                                                                                                                                                                                                                                       |
-| **centerMode** (disabled if `infinite` prop disabled)             | boolean                              | `false`                       | Align active slide to the center of the carousel container viewport                                                                                                                                                                                                                      |
-| **infinite**                                                      | boolean                              | `true`                        | Enable infinite loop scroll                                                                                                                                                                                                                                                              |
-| **disableNavIfEdgeVisible** (disabled if `infinite` prop enabled) | boolean                              | `true`                        | Disable carousel forward nav if last slide is visible / Disable carousel backward nav if first slide is visible                                                                                                                                                                          |
-| **disableNavIfEdgeActive**                                        | boolean                              | `true`                        | Disable carousel forward nav if activeSlideIndex === lastSlideIndex / Disable carousel backward nav if activeSlideIndex === 0                                                                                                                                                            |
-| **dotsNav** (experimental)                                        | object                               | `{}`                          | Props for carousel dots. Includes `show` (boolean) property for toggle dots nav visibility, `containerProps` (DOM Props for dots nav wrapper div) property, `itemBtnProps` (DOM props for all dots nav buttons) property and `activeItemBtnProps` (DOM props for active dots nav button) |
-| **persistentChangeCallbacks**                                     | boolean                              | `false`                       | Enable call `onRequestChange` prop even if activeSlideIndex equals new value                                                                                                                                                                                                             |
-| **showSlidesBeforeInit**                                          | boolean                              | `false`                       | Show slides on very first (initial) carousel render                                                                                                                                                                                                                                      |
+| Name                                                              | Type                                 | Default Value                 | Description                                                                                                                                                                                                                                                                                                         |
+| ----------------------------------------------------------------- | ------------------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **activeSlideIndex**                                              | number                               |                               | Index of active slide                                                                                                                                                                                                                                                                                               |
+| **activeSlideProps**                                              | object                               | `{}`                          | DOM props for active slide element                                                                                                                                                                                                                                                                                  |
+| **autoplay**                                                      | boolean                              | `false`                       |                                                                                                                                                                                                                                                                                                                     |
+| **autoplayDirection**                                             | string (`'forward'` or `'backward'`) | `'forward'`                   |                                                                                                                                                                                                                                                                                                                     |
+| **backwardBtnProps**                                              | object                               | `{}`                          | DOM props for carousel backward nav button element (include boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens))                                                                                                                                                  |
+| **children**                                                      | node                                 | `null`                        | slides array                                                                                                                                                                                                                                                                                                        |
+| **containerProps**                                                | object                               | `{}`                          | DOM props for carousel container div element                                                                                                                                                                                                                                                                        |
+| **delay**                                                         | number                               | `0`                           | Slide change delay (css transition delay) in ms                                                                                                                                                                                                                                                                     |
+| **disableNavIfAllVisible**                                        | boolean                              | `true`                        | Disable carousel nav if all slides is visible                                                                                                                                                                                                                                                                       |
+| **easing**                                                        | string                               | `'linear'`                    | Slide change easing (css transition easing)                                                                                                                                                                                                                                                                         |
+| **forwardBtnProps**                                               | object                               | `{}`                          | DOM props for carousel forward nav button element (include boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens))                                                                                                                                                   |
+| **hideNavIfAllVisible**                                           | boolean                              | `true`                        | Hide nav buttons if all slides is visible                                                                                                                                                                                                                                                                           |
+| **innerProps**                                                    | object                               | `{}`                          | DOM props for inner div element                                                                                                                                                                                                                                                                                     |
+| **itemsListProps**                                                | object                               | `{}`                          | DOM props for items list div element                                                                                                                                                                                                                                                                                |
+| **itemsToScroll**                                                 | number                               | `1`                           | How many slides to scroll at once                                                                                                                                                                                                                                                                                   |
+| **itemsToShow**                                                   | number                               | `0` (automaticaly calculated) | How many slides to show                                                                                                                                                                                                                                                                                             |
+| **onAfterChange**                                                 | function                             | `null`                        | activeSlideIndex change callback                                                                                                                                                                                                                                                                                    |
+| **onRequestChange**                                               | function                             |                               | Callback to handle every time the active slide changes, receives the new active index as first argument and info about visible slides (`{`<br /> ` isFirstSlideVisible: boolean;`<br />`isLastSlideVisible: boolean;`<br />`visibleSlides: { slideIndex: number; isFullyVisible: boolean }[];`<br />`}`) as second. |
+| **responsiveProps**                                               | Array of objects                     | `[]`                          | carousel props for different window width. For example: `[{minWidth: 768, maxWidth: 992, itemsToShow: 3}, {maxWidth: 767, itemsToShow: 1}]` will show only one slide when window width is less than 767px and show 3 slides when window width is >= 768px and < 992px                                               |
+| **speed**                                                         | number                               | `0`                           | Carousel scroll speed (css transition speed) in ms                                                                                                                                                                                                                                                                  |
+| **updateOnItemClick**                                             | boolean                              | `false`                       | Update active item index after click on some slide                                                                                                                                                                                                                                                                  |
+| **centerMode** (disabled if `infinite` prop disabled)             | boolean                              | `false`                       | Align active slide to the center of the carousel container viewport                                                                                                                                                                                                                                                 |
+| **infinite**                                                      | boolean                              | `true`                        | Enable infinite loop scroll                                                                                                                                                                                                                                                                                         |
+| **disableNavIfEdgeVisible** (disabled if `infinite` prop enabled) | boolean                              | `true`                        | Disable carousel forward nav if last slide is visible / Disable carousel backward nav if first slide is visible                                                                                                                                                                                                     |
+| **disableNavIfEdgeActive**                                        | boolean                              | `true`                        | Disable carousel forward nav if activeSlideIndex === lastSlideIndex / Disable carousel backward nav if activeSlideIndex === 0                                                                                                                                                                                       |
+| **dotsNav** (experimental)                                        | object                               | `{}`                          | Props for carousel dots. Includes `show` (boolean) property for toggle dots nav visibility, `containerProps` (DOM Props for dots nav wrapper div) property, `itemBtnProps` (DOM props for all dots nav buttons) property and `activeItemBtnProps` (DOM props for active dots nav button)                            |
+| **persistentChangeCallbacks**                                     | boolean                              | `false`                       | Enable call `onRequestChange` prop even if activeSlideIndex equals new value                                                                                                                                                                                                                                        |
+| **showSlidesBeforeInit** (deprecated)                             | boolean                              | `true`                        | Show slides on very first (initial) carousel render                                                                                                                                                                                                                                                                 |
+| **visibleSlideProps**                                             | object                               | `{}`                          | DOM props for visible slide element                                                                                                                                                                                                                                                                                 |
 
@@ -166,0 +167,0 @@ ## Demo

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51602

increased by11.34%

Lines of code

165

increased by16.2%

Number of lines in readme file

169

increased by0.6%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes