Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-simply-carousel
Advanced tools
react-simply-carousel - npm Package Compare versions
Comparing version 4.2.2 to 5.0.0
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactSimplyCarousel=t(require("react")):e.ReactSimplyCarousel=t(e.React)}(this,(function(e){return(()=>{var t={154:e=>{function t(){return e.exports=t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},t.apply(this,arguments)}e.exports=t},767:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>s});var n=r(154),o=r.n(n),a=r(383),c=r.n(a);function l({responsiveProps:e,...t}){const[r,n]=(0,a.useState)(0),[l,s]=(0,a.useState)(t.activeSlideIndex),u=(0,a.useRef)(null),i=(0,a.useRef)(null),d=(0,a.useRef)(null),f=(0,a.useRef)(null),m=(0,a.useRef)(!1),p=(0,a.useRef)(""),h=(0,a.useRef)(null),b=(0,a.useRef)(null),v=(0,a.useRef)(0),w=e.reduce(((e,{minWidth:t=0,maxWidth:n=null,...o}={})=>r>t&&(!n||r<=n)?{...e,...o}:e),t),y=a.Children.toArray(w.children),{containerProps:{style:C,onClickCapture:k,...x},innerProps:{style:g,...E},itemsListProps:{style:S,onTouchStart:L,onMouseDown:P,onTransitionEnd:T,...W},backwardBtnProps:{children:M=null,show:R=!0,...I},forwardBtnProps:{children:j=null,show:O=!0,...X},activeSlideProps:{className:A="",style:N={},...z},updateOnItemClick:D,activeSlideIndex:B,onRequestChange:V,speed:_,delay:q,easing:F,itemsToShow:G,itemsToScroll:H,children:J,onAfterChange:K,autoplay:Q,autoplayDirection:U,disableNavIfAllVisible:Y,hideNavIfAllVisible:Z,centerMode:$}=r?{...w,activeSlideIndex:Math.max(0,Math.min(w.activeSlideIndex,y.length-1)),itemsToShow:Math.min(y.length,w.itemsToShow),itemsToScroll:Math.min(y.length,w.itemsToScroll)}:t,ee=(0,a.useMemo)((()=>r?[...d.current.children].slice(y.length-l,y.length-l+y.length):[]),[l,y.length,r]),te=(0,a.useCallback)((()=>l-B==0?0:"forward"===p.current.toLowerCase()&&B<l?d.current.offsetWidth/3:"backward"===p.current.toLowerCase()&&B>l?-d.current.offsetWidth/3:0),[B,l]),re=e=>ee.reduce(((t,r,n)=>n>=e?t:t+(r.offsetWidth||0)),0),ne=r&&G?ee.reduce(((e,t,r)=>r>=B&&r<B+G||r<B&&r<B+G-ee.length?e+t.offsetWidth:e),0):null,oe=a.Children.count(J)-1,ae=G===y.length,ce=Z&&ae,le=Y&&ae,se=B-l!=0,ue=r&&se?re(l):0,ie=r&&se?re(B):0,de=r?ee[B].offsetWidth:0,fe=r&&$?-(Math.min(ne||i.current.offsetWidth,i.current.offsetWidth)-de)/2:0,me=se&&(_||q)?"transform ".concat(_,"ms ").concat(F," ").concat(q,"ms"):null,pe=le||!r?0:ie-ue+fe+te()+d.current.offsetWidth/3,he=r?"translateX(-".concat(pe,"px)"):null,be=(0,a.useCallback)((e=>{if("forward"===e){const e=B+H;return e>oe?e-oe-1:e}if("backward"===e){const e=B-H;return e<0?oe+1+e:e}return B}),[B,H,oe]),ve=(0,a.useCallback)((()=>{clearTimeout(h.current)}),[]),we=(0,a.useCallback)((()=>{s(B)}),[B]),ye=(0,a.useCallback)(((e,t)=>{p.current=t,d.current.style.transition=_||q?"transform ".concat(_,"ms ").concat(F," ").concat(q,"ms"):null,e!==B?(ve(),V(e)):(f.current=null,m.current=!1,d.current.style.transform="translateX(-".concat(fe+d.current.offsetWidth/3,"px)"))}),[B,fe,q,F,_,ve,V]),Ce=(0,a.useCallback)((()=>{Q&&(ve(),h.current=setTimeout((()=>{ye(be(U),U)}),q))}),[Q,U,ye,be,q,ve]),ke=(0,a.useCallback)((e=>{m.current&&(e.preventDefault(),e.stopPropagation(),k&&k(e))}),[k]),xe=(0,a.useCallback)((()=>{ye(be("backward"),"backward")}),[ye,be]),ge=(0,a.useCallback)((e=>{const t=f.current-e+fe+d.current.offsetWidth/3,r=d.current.offsetWidth-i.current.offsetWidth,n=Math.max(Math.min(0,-t),-r);d.current.style.transition="none",d.current.style.transform="translateX(".concat(n,"px)")}),[fe]),Ee=(0,a.useCallback)((e=>{const t=f.current-e;t>de/2?ye(be("forward"),"forward"):t<-de/2?ye(be("backward"),"backward"):ye(B,"forward")}),[B,de,ye,be]),Se=(0,a.useCallback)((e=>{m.current=!0,ge(e.clientX)}),[ge]),Le=(0,a.useCallback)((e=>{d.current.removeEventListener("mouseout",Le),d.current.removeEventListener("dragstart",Le),document.removeEventListener("mousemove",Se),document.removeEventListener("mouseup",Le),m.current&&Ee(e.clientX)}),[Ee,Se]),Pe=(0,a.useCallback)((e=>{ve(),m.current||(f.current=e.clientX,document.addEventListener("mousemove",Se),document.addEventListener("mouseup",Le),d.current.addEventListener("mouseout",Le),d.current.addEventListener("dragstart",Le))}),[Se,Le,ve]),Te=(0,a.useCallback)((e=>{m.current=!0,ge(e.touches[0].clientX)}),[ge]),We=(0,a.useCallback)((e=>{document.removeEventListener("touchmove",Te),document.removeEventListener("touchend",We),m.current&&Ee(e.changedTouches[e.changedTouches.length-1].clientX)}),[Ee,Te]),Me=(0,a.useCallback)((e=>{ve(),m.current||(f.current=e.touches[0].clientX,document.addEventListener("touchmove",Te),document.addEventListener("touchend",We))}),[Te,We,ve]),Re=(0,a.useCallback)((()=>{ye(be("forward"),"forward")}),[ye,be]),Ie=(e,t,r)=>e.map(((e,n)=>{const{props:{className:o="",onClick:a,style:c={},...l}={},...s}=e,u=v.current>=y.length?"forward":"backward",i=n+t===B,d={role:"tabpanel",className:"".concat(o," ").concat(i?A:""),style:{...c,...i?N:{},boxSizing:"border-box",margin:0},onClick:!r&&D?(({direction:e,index:t,onClick:r})=>n=>{ye(t,e||(B<t?"forward":"")||(B>t?"backward":"")),r&&r(n)})({direction:u,index:n+t,onClick:a}):a,...l,...i?z:{}};return v.current+=1,{props:d,...s}})),je=(0,a.useCallback)((()=>{n(window.innerWidth)}),[]),Oe=(0,a.useCallback)((()=>{clearTimeout(b.current),ve(),b.current=setTimeout(je,400)}),[je,ve]);return(0,a.useEffect)((()=>(f.current=null,m.current=!1,p.current="",B!==l?_||q||we():(K&&K(B,l),Ce()),()=>{ve()})),[l,B,K,_,q,we,Ce,ve]),(0,a.useEffect)((()=>(r&&!h.current&&Ce(),()=>{ve()})),[r,ve,Ce]),(0,a.useEffect)((()=>{const e=d.current;return je(),window.addEventListener("resize",Oe),()=>{clearTimeout(b.current),window.removeEventListener("resize",Oe),document.removeEventListener("mousemove",Se),document.removeEventListener("mouseup",Le),document.removeEventListener("touchmove",Te),document.removeEventListener("touchend",We),e.removeEventListener("mouseout",Le),e.removeEventListener("dragstart",Le)}}),[Se,Oe,Le,Te,We,je]),v.current=0,c().createElement("div",o()({onClickCapture:ke,style:{display:"flex",boxSizing:"border-box",justifyContent:"center",...C||{}}},x,{ref:u}),R&&!ce&&c().createElement("button",o()({},I,{type:"button",onClick:xe}),M),c().createElement("div",o()({style:{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:ne?"".concat(ne,"px"):"100%",...g}},E,{ref:i}),c().createElement("div",o()({style:{display:"flex",boxSizing:"border-box",outline:"none",...S||{},transition:me,transform:he},onTouchStart:le?null:Me,onMouseDown:le?null:Pe,onTransitionEnd:_||q?we:null,tabIndex:"-1",role:"presentation"},W,{ref:d}),!le&&Ie(y.slice(l),l),Ie(y,0,le),!le&&Ie(y,0),!le&&Ie(y.slice(0,l),0))),O&&!ce&&c().createElement("button",o()({},X,{type:"button",onClick:Re}),j))}l.defaultProps={activeSlideProps:{},autoplay:!1,autoplayDirection:"forward",backwardBtnProps:{},children:null,containerProps:{},delay:0,disableNavIfAllVisible:!0,easing:"linear",forwardBtnProps:{},hideNavIfAllVisible:!0,innerProps:{},itemsListProps:{},itemsToScroll:1,itemsToShow:0,onAfterChange:null,responsiveProps:[],speed:0,updateOnItemClick:!1,centerMode:!1};const s=(0,a.memo)(l)},383:t=>{"use strict";t.exports=e}},r={};function n(e){if(r[e])return r[e].exports;var o=r[e]={exports:{}};return t[e](o,o.exports,n),o.exports}return n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n(767)})()})); | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactSimplyCarousel=t(require("react")):e.ReactSimplyCarousel=t(e.React)}(this,(function(e){return(()=>{var t={154:e=>{function t(){return e.exports=t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},t.apply(this,arguments)}e.exports=t},767:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>l});var n=r(154),o=r.n(n),c=r(383),a=r.n(c);function i({responsiveProps:e,...t}){const[r,n]=(0,c.useState)(0),[i,l]=(0,c.useState)(t.activeSlideIndex),s=(0,c.useRef)(null),u=(0,c.useRef)(null),d=(0,c.useRef)(null),m=(0,c.useRef)(null),f=(0,c.useRef)(!1),h=(0,c.useRef)(""),p=(0,c.useRef)(null),v=(0,c.useRef)(null),b=(0,c.useRef)(0),w=e.reduce(((e,{minWidth:t=0,maxWidth:n=null,...o}={})=>r>t&&(!n||r<=n)?{...e,...o}:e),t),y=c.Children.toArray(w.children),{containerProps:{style:g,onClickCapture:x,...E},innerProps:{style:k,...C},itemsListProps:{style:S,onTouchStart:T,onMouseDown:L,onTransitionEnd:P,...M},backwardBtnProps:{children:I=null,show:W=!0,...R},forwardBtnProps:{children:N=null,show:j=!0,...O},activeSlideProps:{className:A="",style:X={},...z},updateOnItemClick:V,activeSlideIndex:D,onRequestChange:B,speed:_,delay:q,easing:F,itemsToShow:G,itemsToScroll:H,children:J,onAfterChange:K,autoplay:Q,autoplayDirection:U,disableNavIfAllVisible:Y,hideNavIfAllVisible:Z,centerMode:$,infinite:ee,disableNavIfEdgeVisible:te,disableNavIfEdgeActive:re}=r?{...w,activeSlideIndex:Math.max(0,Math.min(w.activeSlideIndex,y.length-1)),itemsToShow:Math.min(y.length,w.itemsToShow),itemsToScroll:Math.min(y.length,w.itemsToScroll)}:t,ne=(0,c.useMemo)((()=>r?ee?[...d.current.children].slice(y.length-i,y.length-i+y.length):[...d.current.children]:[]),[i,y.length,r,ee]),oe=r?d.current.offsetWidth-u.current.offsetWidth:0,ce=e=>{const t=ne.reduce(((t,r,n)=>n>=e?t:t+(r.offsetWidth||0)),0);return ee?t:Math.min(oe,t)},ae=(0,c.useMemo)((()=>r&&G?ne.reduce(((e,t,r)=>r>=D&&r<D+G||r<D&&r<D+G-ne.length?e+t.offsetWidth:e),0):null),[D,G,ne,r]),ie=c.Children.count(J)-1,le=G===y.length,se=Z&&le,ue=Y&&le,de=D-i!=0,me=r&&de&&ee?ce(i):0,fe=!r||!de&&ee?0:ce(D),he=r?ne[D].offsetWidth:0,pe=r&&$&&ee?-(Math.min(ae||u.current.offsetWidth,u.current.offsetWidth)-he)/2:0,ve=(0,c.useMemo)((()=>ee&&r?d.current.offsetWidth/3:0),[r,ee]),be=i-D!=0&&d.current?"forward"===h.current.toLowerCase()&&D<i?ve:"backward"===h.current.toLowerCase()&&D>i?-ve:0:0,we=de&&(_||q)?"transform ".concat(_,"ms ").concat(F," ").concat(q,"ms"):null,ye=ue||!r?0:fe-me+pe+be+ve,ge=r?"translateX(-".concat(ye,"px)"):null,xe=(0,c.useCallback)((e=>{if("forward"===e){const e=D+H;return e>ie?ee?e-ie-1:D:e}if("backward"===e){const e=D-H;return e<0?ee?ie+1+e:D:e}return D}),[D,H,ie,ee]),Ee=(0,c.useCallback)(((e,t)=>{h.current=t,d.current.style.transition=_||q?"transform ".concat(_,"ms ").concat(F," ").concat(q,"ms"):null,e!==D?(clearTimeout(p.current),B(e)):(m.current=null,f.current=!1,d.current.style.transform="translateX(-".concat(pe+ve+(ee?0:ye),"px)"))}),[D,pe,q,F,_,B,ve,ee,ye]),ke=(0,c.useCallback)((()=>{Q&&(clearTimeout(p.current),p.current=setTimeout((()=>{Ee(xe(U),U)}),q))}),[Q,U,Ee,xe,q]),Ce=(0,c.useCallback)((e=>{f.current&&(e.preventDefault(),e.stopPropagation(),x&&x(e))}),[x]),Se=(0,c.useCallback)((()=>{Ee(xe("backward"),"backward")}),[Ee,xe]),Te=(0,c.useCallback)((e=>{f.current=!0;const t=e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX,r=m.current-t+pe+ve+(ee?0:ye),n=d.current.offsetWidth-u.current.offsetWidth,o=Math.max(Math.min(0,-r),-n);d.current.style.transition=null,d.current.style.transform="translateX(".concat(o,"px)")}),[pe,ve,ee,ye]),Le=(0,c.useCallback)((e=>{if(d.current.removeEventListener("mouseout",Le),d.current.removeEventListener("dragstart",Le),document.removeEventListener("mousemove",Te),document.removeEventListener("mouseup",Le),document.removeEventListener("touchmove",Te),document.removeEventListener("touchend",Le),f.current){const t=e.changedTouches&&e.changedTouches.length?e.changedTouches[e.changedTouches.length-1].clientX:e.clientX,r=m.current-t;r>he/2?Ee(xe("forward"),"forward"):r<-he/2?Ee(xe("backward"),"backward"):Ee(D,"forward")}}),[D,he,Ee,xe,Te]),Pe=(0,c.useCallback)((e=>{clearTimeout(p.current),f.current||(m.current=e.clientX,document.addEventListener("mousemove",Te),document.addEventListener("mouseup",Le),d.current.addEventListener("mouseout",Le),d.current.addEventListener("dragstart",Le))}),[Te,Le]),Me=(0,c.useCallback)((e=>{clearTimeout(p.current),f.current||(m.current=e.touches[0].clientX,document.addEventListener("touchmove",Te),document.addEventListener("touchend",Le))}),[Te,Le]),Ie=(0,c.useCallback)((()=>{l(D)}),[D]),We=(0,c.useCallback)((()=>{Ee(xe("forward"),"forward")}),[Ee,xe]),Re=(e,t,r)=>e.map(((e,n)=>{const{props:{className:o="",onClick:c,style:a={},...i}={},...l}=e,s=ee?b.current>=y.length?"forward":"backward":n>=D?"forward":"backward",u=n+t===D,d={role:"tabpanel",className:"".concat(o," ").concat(s," ").concat(u?A:""),style:{...a,...u?X:{},boxSizing:"border-box",margin:0},onClick:!r&&V?(({direction:e,index:t,onClick:r})=>n=>{Ee(t,e||(D<t?"forward":"")||(D>t?"backward":"")),r&&r(n)})({direction:s,index:n+t,onClick:c}):c,...i,...u?z:{}};return b.current+=1,{props:d,...l}}));return(0,c.useEffect)((()=>(m.current=null,f.current=!1,h.current="",D!==i?_||q||l(D):(K&&K(D,i),(ee||"forward"===U&&D!==ie||"backward"===U&&0!==D)&&ke()),()=>{clearTimeout(p.current)})),[i,D,K,_,q,ke,ee,ie,U]),(0,c.useEffect)((()=>(r&&ke(),()=>{clearTimeout(p.current)})),[r]),(0,c.useEffect)((()=>{const e=d.current;function t(){clearTimeout(v.current),clearTimeout(p.current),v.current=setTimeout((()=>{n(window.innerWidth)}),400)}return n(window.innerWidth),window.addEventListener("resize",t),()=>{clearTimeout(v.current),window.removeEventListener("resize",t),document.removeEventListener("mousemove",Te),document.removeEventListener("mouseup",Le),document.removeEventListener("touchmove",Te),document.removeEventListener("touchend",Le),e.removeEventListener("mouseout",Le),e.removeEventListener("dragstart",Le)}}),[Te,Le]),b.current=0,r&&(d.current.style.transform=ge),a().createElement("div",o()({onClickCapture:Ce,style:{display:"flex",boxSizing:"border-box",justifyContent:"center",...g||{}}},E,{ref:s}),W&&!se&&a().createElement("button",o()({},R,{type:"button",onClick:(0===ye&&te||0===D&&re)&&!ee?null:Se}),I),a().createElement("div",o()({},C,{style:{...k||{},display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:ae?"".concat(ae,"px"):"100%"},ref:u}),a().createElement("div",o()({},M,{style:{...S||{},display:"flex",boxSizing:"border-box",outline:"none",transition:we,transform:ge},"data-transform":ge,onTouchStart:ue?null:Me,onMouseDown:ue?null:Pe,onTransitionEnd:_||q?Ie:null,tabIndex:"-1",role:"presentation",ref:d}),!ue&&ee&&Re(y.slice(i),i),Re(y,0,ue),!ue&&ee&&Re(y,0),!ue&&ee&&Re(y.slice(0,i),0))),j&&!se&&a().createElement("button",o()({},O,{type:"button",onClick:(ye===oe&&te||D===ie&&re)&&!ee?null:We}),N))}i.defaultProps={activeSlideProps:{},autoplay:!1,autoplayDirection:"forward",backwardBtnProps:{},children:null,containerProps:{},delay:0,disableNavIfAllVisible:!0,easing:"linear",forwardBtnProps:{},hideNavIfAllVisible:!0,innerProps:{},itemsListProps:{},itemsToScroll:1,itemsToShow:0,onAfterChange:null,responsiveProps:[],speed:0,updateOnItemClick:!1,centerMode:!1,infinite:!0,disableNavIfEdgeVisible:!0,disableNavIfEdgeActive:!0};const l=(0,c.memo)(i)},383:t=>{"use strict";t.exports=e}},r={};function n(e){if(r[e])return r[e].exports;var o=r[e]={exports:{}};return t[e](o,o.exports,n),o.exports}return n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n(767)})()})); |
| { | ||
| "name": "react-simply-carousel", | ||
| "version": "4.2.2", | ||
| "version": "5.0.0", | ||
| "description": "Simple react.js carousel component", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
@@ -75,26 +75,29 @@ # react-simply-carousel | ||
| | Name | Type | Default Value | Description | | ||
| | ---------------------- | -------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | activeSlideIndex | number | | Index of first visible children (slide) | | ||
| | activeSlideProps | object | {} | DOM props for first visible slide element | | ||
| | autoplay | boolean | false | Boolean indicating if the carousel should be updated automatically | | ||
| | autoplayDirection | string ('forward' or 'backward') | 'forward' | Direction of autoplay updates | | ||
| | backwardBtnProps | object | {} | Contain DOM props for carousel backward button element, boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens) | | ||
| | children | node | null | Array of slides | | ||
| | containerProps | object | {} | DOM props for container div element | | ||
| | delay | number | 0 | Slide change delay (css transition delay) in ms | | ||
| | disableNavIfAllVisible | boolean | true | Boolean indicating if the carousel nav (by nav buttons, click on slide item, mouse move or touch move) should be disabled if all slides is visible | | ||
| | easing | string | 'linear' | Slide change easing (css transition easing) | | ||
| | forwardBtnProps | object | {} | Contain DOM props for carousel forward button element, boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens) | | ||
| | hideNavIfAllVisible | boolean | true | Boolean indicating if the carousel nav buttons should be hidden 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 | number of slides that should be scrolled to hidden part of carousel | | ||
| | itemsToShow | number | 0 (automaticaly calculated) | number of slides that should be visible | | ||
| | onAfterChange | function | null | Function that will be run after all updates is done and carousel moving is end | | ||
| | onRequestChange | function | | Function that will be run when the activeSlideIndex is requested to be changed (either by clicking on navigation button, clicking on slide (if prop `updateOnItemClick` value is `true` ), or after drag slides) | | ||
| | 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 | Slide change speed (css transition speed) in ms | | ||
| | updateOnItemClick | boolean | false | Boolean indicating if the `onRequestChange` prop should be called after click on some slide | | ||
| | centerMode | boolean | false | Boolean indicating if the active slide should be aligned to center of container viewport | | ||
| | 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 | `false` | Disable carousel forward nav if last slide is visible / Disable carousel backward nav if first slide is visible | | ||
| | **disableNavIfEdgeActive** | boolean | `false` | Disable carousel forward nav if activeSlideIndex === lastSlideIndex / Disable carousel backward nav if activeSlideIndex === 0 | | ||
@@ -101,0 +104,0 @@ ## Demo |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis 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
- increased by12.65%
24927
- Number of lines in readme file
- increased by2.91%
106
No dependency changes