Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-multi-carousel

Package Overview
Dependencies
Maintainers
1
Versions
133
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-multi-carousel - npm Package Compare versions

Comparing version 2.2.2 to 2.2.4

2

lib/Arrows.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),LeftArrow=function(e){var t=e.customLeftArrow,r=e.getState,o=e.previous;return t?React.cloneElement(t,{onClick:function(){return o()},carouselState:r()}):React.createElement("button",{className:"react-multiple-carousel__arrow react-multiple-carousel__arrow--left",onClick:function(){return o()}})};exports.LeftArrow=LeftArrow;var RightArrow=function(e){var t=e.customRightArrow,r=e.next,o=e.getState;return t?React.cloneElement(t,{onClick:function(){return r()},carouselState:o()}):React.createElement("button",{className:"react-multiple-carousel__arrow react-multiple-carousel__arrow--right",onClick:function(){return r()}})};exports.RightArrow=RightArrow;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),LeftArrow=function(_a){var customLeftArrow=_a.customLeftArrow,getState=_a.getState,previous=_a.previous;return customLeftArrow?React.cloneElement(customLeftArrow,{onClick:function(){return previous()},carouselState:getState()}):React.createElement("button",{className:"react-multiple-carousel__arrow react-multiple-carousel__arrow--left",onClick:function(){return previous()}})};exports.LeftArrow=LeftArrow;var RightArrow=function(_a){var customRightArrow=_a.customRightArrow,next=_a.next,getState=_a.getState;return customRightArrow?React.cloneElement(customRightArrow,{onClick:function(){return next()},carouselState:getState()}):React.createElement("button",{className:"react-multiple-carousel__arrow react-multiple-carousel__arrow--right",onClick:function(){return next()}})};exports.RightArrow=RightArrow;

2

lib/Carousel.js

@@ -1,1 +0,1 @@

"use strict";var __extends=this&&this.__extends||function(){var o=function(t,e){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])})(t,e)};return function(t,e){function i(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}}(),__assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var e,i=1,o=arguments.length;i<o;i++)for(var s in e=arguments[i])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t}).apply(this,arguments)};Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),utils_1=require("./utils"),Dots_1=require("./Dots"),Arrows_1=require("./Arrows"),CarouselItems_1=require("./CarouselItems"),defaultTransitionDuration=400,defaultTransition="transform 400ms ease-in-out",Carousel=function(i){function t(t){var e=i.call(this,t)||this;return e.containerRef=React.createRef(),e.state={itemWidth:0,slidesToShow:0,currentSlide:0,totalItems:React.Children.count(t.children),deviceType:"",domLoaded:!1,transform:0,containerWidth:0},e.onResize=e.onResize.bind(e),e.handleDown=e.handleDown.bind(e),e.handleMove=e.handleMove.bind(e),e.handleOut=e.handleOut.bind(e),e.onKeyUp=e.onKeyUp.bind(e),e.handleEnter=e.handleEnter.bind(e),e.setIsInThrottle=e.setIsInThrottle.bind(e),e.next=utils_1.throttle(e.next.bind(e),t.transitionDuration||defaultTransitionDuration,e.setIsInThrottle),e.previous=utils_1.throttle(e.previous.bind(e),t.transitionDuration||defaultTransitionDuration,e.setIsInThrottle),e.goToSlide=utils_1.throttle(e.goToSlide.bind(e),t.transitionDuration||defaultTransitionDuration,e.setIsInThrottle),e.onMove=!1,e.initialX=0,e.lastX=0,e.isAnimationAllowed=!1,e.direction="",e.initialY=0,e.isInThrottle=!1,e}return __extends(t,i),t.prototype.setIsInThrottle=function(t){void 0===t&&(t=!1),this.isInThrottle=t},t.prototype.componentDidMount=function(){this.setState({domLoaded:!0}),this.setItemsToShow(),window.addEventListener("resize",this.onResize),this.onResize(!0),this.props.keyBoardControl&&window.addEventListener("keyup",this.onKeyUp),this.props.autoPlay&&this.props.autoPlaySpeed&&(this.autoPlay=setInterval(this.next,this.props.autoPlaySpeed))},t.prototype.setClones=function(t,e,i){var o=this;this.isAnimationAllowed=!1;var s=React.Children.toArray(this.props.children),n=utils_1.getInitialSlideInInifteMode(t||this.state.slidesToShow,s),r=utils_1.getClones(this.state.slidesToShow,s);utils_1.notEnoughChildren(this.state,this.props,t)||this.setState({totalItems:r.length,currentSlide:i?this.state.currentSlide:n},function(){o.correctItemsPosition(e||o.state.itemWidth)})},t.prototype.setItemsToShow=function(r){var a=this,h=this.props.responsive;Object.keys(h).forEach(function(t){var e=h[t],i=e.breakpoint,o=e.items,s=i.max,n=i.min;window.innerWidth>=n&&window.innerWidth<=s&&(a.setState({slidesToShow:o,deviceType:t}),a.setContainerAndItemWidth(o,r))})},t.prototype.setContainerAndItemWidth=function(t,e){var i=this;if(this.containerRef&&this.containerRef.current){var o=this.containerRef.current.offsetWidth,s=utils_1.getItemClientSideWidth(this.props,t,o);this.setState({containerWidth:o,itemWidth:s},function(){i.props.infinite&&i.setClones(t,s,e)}),e&&this.correctItemsPosition(s)}},t.prototype.correctItemsPosition=function(t,e){e&&(this.isAnimationAllowed=!0),!e&&this.isAnimationAllowed&&(this.isAnimationAllowed=!1),this.setState({transform:-t*this.state.currentSlide})},t.prototype.onResize=function(t){var e;e=!!this.props.infinite&&("boolean"!=typeof t||!t),this.setItemsToShow(e)},t.prototype.componentDidUpdate=function(t,e){var i=this,o=t.keyBoardControl,s=t.autoPlay,n=e.containerWidth,r=e.domLoaded;this.containerRef&&this.containerRef.current&&this.containerRef.current.offsetWidth!==n&&setTimeout(function(){i.setItemsToShow(!0)},this.props.transitionDuration||defaultTransitionDuration),o&&!this.props.keyBoardControl&&window.removeEventListener("keyup",this.onKeyUp),s&&!this.props.autoPlay&&this.autoPlay&&(clearInterval(this.autoPlay),this.autoPlay=void 0),s||!this.props.autoPlay||this.autoPlay||(this.autoPlay=setInterval(this.next,this.props.autoPlaySpeed)),this.props.infinite&&this.correctClonesPosition({domLoaded:r})},t.prototype.correctClonesPosition=function(t){var e=this,i=t.domLoaded,o=React.Children.toArray(this.props.children),s=utils_1.checkClonesPosition(this.state,o,this.props),n=s.isReachingTheEnd,r=s.isReachingTheStart,a=s.nextSlide,h=s.nextPosition;this.state.domLoaded&&i&&(n||r)&&(this.isAnimationAllowed=!1,setTimeout(function(){e.setState({transform:h,currentSlide:a})},this.props.transitionDuration||defaultTransitionDuration))},t.prototype.next=function(t){var e=this;void 0===t&&(t=0);var i=this.props,o=i.afterChange,s=i.beforeChange;if(!utils_1.notEnoughChildren(this.state,this.props)){var n=utils_1.populateNextSlides(this.state,this.props,t),r=n.nextSlides,a=n.nextPosition,h=this.state.currentSlide;void 0!==r&&void 0!==a&&("function"==typeof s&&s(r,this.getState()),this.isAnimationAllowed=!0,this.setState({transform:a,currentSlide:r},function(){"function"==typeof o&&setTimeout(function(){o(h,e.getState())},e.props.transitionDuration||defaultTransitionDuration)}))}},t.prototype.previous=function(t){var e=this;void 0===t&&(t=0);var i=this.props,o=i.afterChange,s=i.beforeChange;if(!utils_1.notEnoughChildren(this.state,this.props)){var n=utils_1.populatePreviousSlides(this.state,this.props,t),r=n.nextSlides,a=n.nextPosition;if(void 0!==r&&void 0!==a){var h=this.state.currentSlide;"function"==typeof s&&s(r,this.getState()),this.isAnimationAllowed=!0,this.setState({transform:a,currentSlide:r},function(){"function"==typeof o&&setTimeout(function(){o(h,e.getState())},e.props.transitionDuration||defaultTransitionDuration)})}}},t.prototype.componentWillUnmount=function(){window.removeEventListener("resize",this.onResize),this.props.keyBoardControl&&window.removeEventListener("keyup",this.onKeyUp),this.props.autoPlay&&this.autoPlay&&(clearInterval(this.autoPlay),this.autoPlay=void 0)},t.prototype.resetMoveStatus=function(){this.onMove=!1,this.initialX=0,this.lastX=0,this.direction="",this.initialY=0},t.prototype.handleDown=function(t){if(!(t.touches&&!this.props.swipeable||!t.touches&&!this.props.draggable||this.isInThrottle)){var e=t.touches?t.touches[0]:t,i=e.clientX,o=e.clientY;this.onMove=!0,this.initialX=i,this.initialY=o,this.lastX=i,this.isAnimationAllowed=!1}},t.prototype.handleMove=function(t){if(!(t.touches&&!this.props.swipeable||t&&!t.touches&&!this.props.draggable||utils_1.notEnoughChildren(this.state,this.props))){var e=t.touches?t.touches[0]:t,i=e.clientX,o=e.clientY,s=this.initialX-i,n=this.initialY-o;if(t.touches&&this.autoPlay&&this.props.autoPlay&&(clearInterval(this.autoPlay),this.autoPlay=void 0),this.onMove){if(!(Math.abs(s)>Math.abs(n)))return;var r=utils_1.populateSlidesOnMouseTouchMove(this.state,this.props,this.initialX,this.lastX,i),a=r.direction,h=r.nextPosition,l=r.canContinue;a&&(this.direction=a,l&&void 0!==h&&this.setState({transform:h})),this.lastX=i}}},t.prototype.handleOut=function(t){this.props.autoPlay&&!this.autoPlay&&(this.autoPlay=setInterval(this.next,this.props.autoPlaySpeed));var e="touchend"===t.type&&!this.props.swipeable,i=("mouseleave"===t.type||"mouseup"===t.type)&&!this.props.draggable;if(!e&&!i&&this.onMove){if("right"===this.direction)if(this.initialX-this.lastX>=this.props.minimumTouchDrag){var o=Math.round((this.initialX-this.lastX)/this.state.itemWidth);this.next(o)}else this.correctItemsPosition(this.state.itemWidth,!0);if("left"===this.direction)if(this.lastX-this.initialX>this.props.minimumTouchDrag){o=Math.round((this.lastX-this.initialX)/this.state.itemWidth);this.previous(o)}else this.correctItemsPosition(this.state.itemWidth,!0);this.resetMoveStatus()}},t.prototype.onKeyUp=function(t){switch(t.keyCode){case 37:return this.previous();case 39:return this.next()}},t.prototype.handleEnter=function(){this.autoPlay&&this.props.autoPlay&&(clearInterval(this.autoPlay),this.autoPlay=void 0)},t.prototype.goToSlide=function(t){var e=this;if(!this.isInThrottle){var i=this.state.itemWidth,o=this.props,s=o.afterChange,n=o.beforeChange,r=this.state.currentSlide;"function"==typeof n&&n(t,this.getState()),this.isAnimationAllowed=!0,this.setState({currentSlide:t,transform:-i*t},function(){e.props.infinite&&e.correctClonesPosition({domLoaded:!0}),"function"==typeof s&&setTimeout(function(){s(r,e.getState())},e.props.transitionDuration||defaultTransitionDuration)})}},t.prototype.getState=function(){return __assign({},this.state,{onMove:this.onMove,direction:this.direction})},t.prototype.renderLeftArrow=function(){var t=this,e=this.props.customLeftArrow;return React.createElement(Arrows_1.LeftArrow,{customLeftArrow:e,getState:function(){return t.getState()},previous:this.previous})},t.prototype.renderRightArrow=function(){var t=this,e=this.props.customRightArrow;return React.createElement(Arrows_1.RightArrow,{customRightArrow:e,getState:function(){return t.getState()},next:this.next})},t.prototype.renderButtonGroups=function(){var e=this,t=this.props.customButtonGroup;return t?React.cloneElement(t,{previous:function(){return e.previous()},next:function(){return e.next()},goToSlide:function(t){return e.goToSlide(t)},carouselState:this.getState()}):null},t.prototype.renderDotsList=function(){var t=this;return React.createElement(Dots_1.default,{state:this.state,props:this.props,goToSlide:this.goToSlide,getState:function(){return t.getState()}})},t.prototype.renderCarouselItems=function(){var t=[];if(this.props.infinite){var e=React.Children.toArray(this.props.children);t=utils_1.getClones(this.state.slidesToShow,e)}return React.createElement(CarouselItems_1.default,{clones:t,goToSlide:this.goToSlide,state:this.state,props:this.props})},t.prototype.render=function(){var t=this.props,e=t.deviceType,i=t.arrows,o=t.removeArrowOnDeviceType,s=t.infinite,n=t.containerClass,r=t.sliderClass,a=t.customTransition,h=t.partialVisbile,l=t.centerMode,u=t.additionalTransfrom,p=t.renderDotsOutside,d=t.className;"production"!==process.env.NODE_ENV&&utils_1.throwError(this.state,this.props);var c=utils_1.getInitialState(this.state,this.props),f=c.shouldRenderOnSSR,m=c.paritialVisibilityGutter,v=c.shouldRenderAtAll,y=utils_1.isInLeftEnd(this.state),S=utils_1.isInRightEnd(this.state),g=i&&!(o&&(e&&-1<o.indexOf(e)||this.state.deviceType&&-1<o.indexOf(this.state.deviceType)))&&!utils_1.notEnoughChildren(this.state,this.props)&&v,w=!s&&y,T=!s&&S,_=h?utils_1.getTransformForPartialVsibile(this.state,m,this.props):l?utils_1.getTransformForCenterMode(this.state,this.props):this.state.transform;return React.createElement(React.Fragment,null,React.createElement("div",{className:"react-multi-carousel-list "+n+" "+d,ref:this.containerRef},React.createElement("ul",{className:"react-multi-carousel-track "+r,style:{transition:this.isAnimationAllowed?a||defaultTransition:"none",overflow:f?"hidden":"unset",transform:"translate3d("+(_+u)+"px,0,0)"},onMouseMove:this.handleMove,onMouseDown:this.handleDown,onMouseUp:this.handleOut,onMouseEnter:this.handleEnter,onMouseLeave:this.handleOut,onTouchStart:this.handleDown,onTouchMove:this.handleMove,onTouchEnd:this.handleOut},this.renderCarouselItems()),g&&!w&&this.renderLeftArrow(),g&&!T&&this.renderRightArrow(),v&&this.renderButtonGroups(),v&&!p&&this.renderDotsList()),v&&p&&this.renderDotsList())},t.defaultProps={slidesToSlide:1,infinite:!1,draggable:!0,swipeable:!0,arrows:!0,containerClass:"",sliderClass:"",itemClass:"",keyBoardControl:!0,autoPlaySpeed:3e3,showDots:!1,renderDotsOutside:!1,minimumTouchDrag:80,dotListClass:"",focusOnSelect:!1,centerMode:!1,additionalTransfrom:0},t}(React.Component);exports.default=Carousel;
"use strict";var __extends=this&&this.__extends||function(){var extendStatics=function(d,b){return(extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])})(d,b)};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}(),__assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)};Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),utils_1=require("./utils"),types_1=require("./types"),Dots_1=require("./Dots"),Arrows_1=require("./Arrows"),CarouselItems_1=require("./CarouselItems"),defaultTransitionDuration=400,defaultTransition="transform 400ms ease-in-out",Carousel=function(_super){function Carousel(props){var _this=_super.call(this,props)||this;return _this.containerRef=React.createRef(),_this.state={itemWidth:0,slidesToShow:0,currentSlide:0,totalItems:React.Children.count(props.children),deviceType:"",domLoaded:!1,transform:0,containerWidth:0},_this.onResize=_this.onResize.bind(_this),_this.handleDown=_this.handleDown.bind(_this),_this.handleMove=_this.handleMove.bind(_this),_this.handleOut=_this.handleOut.bind(_this),_this.onKeyUp=_this.onKeyUp.bind(_this),_this.handleEnter=_this.handleEnter.bind(_this),_this.setIsInThrottle=_this.setIsInThrottle.bind(_this),_this.next=utils_1.throttle(_this.next.bind(_this),props.transitionDuration||defaultTransitionDuration,_this.setIsInThrottle),_this.previous=utils_1.throttle(_this.previous.bind(_this),props.transitionDuration||defaultTransitionDuration,_this.setIsInThrottle),_this.goToSlide=utils_1.throttle(_this.goToSlide.bind(_this),props.transitionDuration||defaultTransitionDuration,_this.setIsInThrottle),_this.onMove=!1,_this.initialX=0,_this.lastX=0,_this.isAnimationAllowed=!1,_this.direction="",_this.initialY=0,_this.isInThrottle=!1,_this}return __extends(Carousel,_super),Carousel.prototype.setIsInThrottle=function(isInThrottle){void 0===isInThrottle&&(isInThrottle=!1),this.isInThrottle=isInThrottle},Carousel.prototype.componentDidMount=function(){this.setState({domLoaded:!0}),this.setItemsToShow(),window.addEventListener("resize",this.onResize),this.onResize(!0),this.props.keyBoardControl&&window.addEventListener("keyup",this.onKeyUp),this.props.autoPlay&&this.props.autoPlaySpeed&&(this.autoPlay=setInterval(this.next,this.props.autoPlaySpeed))},Carousel.prototype.setClones=function(slidesToShow,itemWidth,forResizing){var _this=this;this.isAnimationAllowed=!1;var childrenArr=React.Children.toArray(this.props.children),initialSlide=utils_1.getInitialSlideInInifteMode(slidesToShow||this.state.slidesToShow,childrenArr),clones=utils_1.getClones(this.state.slidesToShow,childrenArr);utils_1.notEnoughChildren(this.state,this.props,slidesToShow)||this.setState({totalItems:clones.length,currentSlide:forResizing?this.state.currentSlide:initialSlide},function(){_this.correctItemsPosition(itemWidth||_this.state.itemWidth)})},Carousel.prototype.setItemsToShow=function(shouldCorrectItemPosition){var _this=this,responsive=this.props.responsive;Object.keys(responsive).forEach(function(item){var _a=responsive[item],breakpoint=_a.breakpoint,items=_a.items,max=breakpoint.max,min=breakpoint.min;window.innerWidth>=min&&window.innerWidth<=max&&(_this.setState({slidesToShow:items,deviceType:item}),_this.setContainerAndItemWidth(items,shouldCorrectItemPosition))})},Carousel.prototype.setContainerAndItemWidth=function(slidesToShow,shouldCorrectItemPosition){var _this=this;if(this.containerRef&&this.containerRef.current){var containerWidth=this.containerRef.current.offsetWidth,itemWidth_1=utils_1.getItemClientSideWidth(this.props,slidesToShow,containerWidth);this.setState({containerWidth:containerWidth,itemWidth:itemWidth_1},function(){_this.props.infinite&&_this.setClones(slidesToShow,itemWidth_1,shouldCorrectItemPosition)}),shouldCorrectItemPosition&&this.correctItemsPosition(itemWidth_1)}},Carousel.prototype.correctItemsPosition=function(itemWidth,isAnimationAllowed){isAnimationAllowed&&(this.isAnimationAllowed=!0),!isAnimationAllowed&&this.isAnimationAllowed&&(this.isAnimationAllowed=!1),this.setState({transform:-itemWidth*this.state.currentSlide})},Carousel.prototype.onResize=function(value){var shouldCorrectItemPosition;shouldCorrectItemPosition=!!this.props.infinite&&("boolean"!=typeof value||!value),this.setItemsToShow(shouldCorrectItemPosition)},Carousel.prototype.componentDidUpdate=function(_a,_b){var _this=this,keyBoardControl=_a.keyBoardControl,autoPlay=_a.autoPlay,containerWidth=_b.containerWidth,domLoaded=_b.domLoaded;this.containerRef&&this.containerRef.current&&this.containerRef.current.offsetWidth!==containerWidth&&setTimeout(function(){_this.setItemsToShow(!0)},this.props.transitionDuration||defaultTransitionDuration),keyBoardControl&&!this.props.keyBoardControl&&window.removeEventListener("keyup",this.onKeyUp),!keyBoardControl&&this.props.keyBoardControl&&window.addEventListener("keyup",this.onKeyUp),autoPlay&&!this.props.autoPlay&&this.autoPlay&&(clearInterval(this.autoPlay),this.autoPlay=void 0),autoPlay||!this.props.autoPlay||this.autoPlay||(this.autoPlay=setInterval(this.next,this.props.autoPlaySpeed)),this.props.infinite&&this.correctClonesPosition({domLoaded:domLoaded})},Carousel.prototype.correctClonesPosition=function(_a){var _this=this,domLoaded=_a.domLoaded,childrenArr=React.Children.toArray(this.props.children),_b=utils_1.checkClonesPosition(this.state,childrenArr,this.props),isReachingTheEnd=_b.isReachingTheEnd,isReachingTheStart=_b.isReachingTheStart,nextSlide=_b.nextSlide,nextPosition=_b.nextPosition;this.state.domLoaded&&domLoaded&&(isReachingTheEnd||isReachingTheStart)&&(this.isAnimationAllowed=!1,setTimeout(function(){_this.setState({transform:nextPosition,currentSlide:nextSlide})},this.props.transitionDuration||defaultTransitionDuration))},Carousel.prototype.next=function(slidesHavePassed){var _this=this;void 0===slidesHavePassed&&(slidesHavePassed=0);var _a=this.props,afterChange=_a.afterChange,beforeChange=_a.beforeChange;if(!utils_1.notEnoughChildren(this.state,this.props)){var _b=utils_1.populateNextSlides(this.state,this.props,slidesHavePassed),nextSlides=_b.nextSlides,nextPosition=_b.nextPosition,previousSlide=this.state.currentSlide;void 0!==nextSlides&&void 0!==nextPosition&&("function"==typeof beforeChange&&beforeChange(nextSlides,this.getState()),this.isAnimationAllowed=!0,this.setState({transform:nextPosition,currentSlide:nextSlides},function(){"function"==typeof afterChange&&setTimeout(function(){afterChange(previousSlide,_this.getState())},_this.props.transitionDuration||defaultTransitionDuration)}))}},Carousel.prototype.previous=function(slidesHavePassed){var _this=this;void 0===slidesHavePassed&&(slidesHavePassed=0);var _a=this.props,afterChange=_a.afterChange,beforeChange=_a.beforeChange;if(!utils_1.notEnoughChildren(this.state,this.props)){var _b=utils_1.populatePreviousSlides(this.state,this.props,slidesHavePassed),nextSlides=_b.nextSlides,nextPosition=_b.nextPosition;if(void 0!==nextSlides&&void 0!==nextPosition){var previousSlide=this.state.currentSlide;"function"==typeof beforeChange&&beforeChange(nextSlides,this.getState()),this.isAnimationAllowed=!0,this.setState({transform:nextPosition,currentSlide:nextSlides},function(){"function"==typeof afterChange&&setTimeout(function(){afterChange(previousSlide,_this.getState())},_this.props.transitionDuration||defaultTransitionDuration)})}}},Carousel.prototype.componentWillUnmount=function(){window.removeEventListener("resize",this.onResize),this.props.keyBoardControl&&window.removeEventListener("keyup",this.onKeyUp),this.props.autoPlay&&this.autoPlay&&(clearInterval(this.autoPlay),this.autoPlay=void 0)},Carousel.prototype.resetMoveStatus=function(){this.onMove=!1,this.initialX=0,this.lastX=0,this.direction="",this.initialY=0},Carousel.prototype.handleDown=function(e){if(!(!types_1.isMouseMoveEvent(e)&&!this.props.swipeable||types_1.isMouseMoveEvent(e)&&!this.props.draggable||this.isInThrottle)){var _a=types_1.isMouseMoveEvent(e)?e:e.touches[0],clientX=_a.clientX,clientY=_a.clientY;this.onMove=!0,this.initialX=clientX,this.initialY=clientY,this.lastX=clientX,this.isAnimationAllowed=!1}},Carousel.prototype.handleMove=function(e){if(!(!types_1.isMouseMoveEvent(e)&&!this.props.swipeable||types_1.isMouseMoveEvent(e)&&!this.props.draggable||utils_1.notEnoughChildren(this.state,this.props))){var _a=types_1.isMouseMoveEvent(e)?e:e.touches[0],clientX=_a.clientX,clientY=_a.clientY,diffX=this.initialX-clientX,diffY=this.initialY-clientY;if(!types_1.isMouseMoveEvent(e)&&this.autoPlay&&this.props.autoPlay&&(clearInterval(this.autoPlay),this.autoPlay=void 0),this.onMove){if(!(Math.abs(diffX)>Math.abs(diffY)))return;var _b=utils_1.populateSlidesOnMouseTouchMove(this.state,this.props,this.initialX,this.lastX,clientX),direction=_b.direction,nextPosition=_b.nextPosition,canContinue=_b.canContinue;direction&&(this.direction=direction,canContinue&&void 0!==nextPosition&&this.setState({transform:nextPosition})),this.lastX=clientX}}},Carousel.prototype.handleOut=function(e){this.props.autoPlay&&!this.autoPlay&&(this.autoPlay=setInterval(this.next,this.props.autoPlaySpeed));var shouldDisableOnMobile="touchend"===e.type&&!this.props.swipeable,shouldDisableOnDesktop=("mouseleave"===e.type||"mouseup"===e.type)&&!this.props.draggable;if(!shouldDisableOnMobile&&!shouldDisableOnDesktop&&this.onMove){if("right"===this.direction)if(this.initialX-this.lastX>=this.props.minimumTouchDrag){var slidesHavePassed=Math.round((this.initialX-this.lastX)/this.state.itemWidth);this.next(slidesHavePassed)}else this.correctItemsPosition(this.state.itemWidth,!0);if("left"===this.direction)if(this.lastX-this.initialX>this.props.minimumTouchDrag){slidesHavePassed=Math.round((this.lastX-this.initialX)/this.state.itemWidth);this.previous(slidesHavePassed)}else this.correctItemsPosition(this.state.itemWidth,!0);this.resetMoveStatus()}},Carousel.prototype.onKeyUp=function(e){switch(e.keyCode){case 37:return this.previous();case 39:return this.next()}},Carousel.prototype.handleEnter=function(){this.autoPlay&&this.props.autoPlay&&(clearInterval(this.autoPlay),this.autoPlay=void 0)},Carousel.prototype.goToSlide=function(slide){var _this=this;if(!this.isInThrottle){var itemWidth=this.state.itemWidth,_a=this.props,afterChange=_a.afterChange,beforeChange=_a.beforeChange,previousSlide=this.state.currentSlide;"function"==typeof beforeChange&&beforeChange(slide,this.getState()),this.isAnimationAllowed=!0,this.setState({currentSlide:slide,transform:-itemWidth*slide},function(){_this.props.infinite&&_this.correctClonesPosition({domLoaded:!0}),"function"==typeof afterChange&&setTimeout(function(){afterChange(previousSlide,_this.getState())},_this.props.transitionDuration||defaultTransitionDuration)})}},Carousel.prototype.getState=function(){return __assign({},this.state,{onMove:this.onMove,direction:this.direction})},Carousel.prototype.renderLeftArrow=function(){var _this=this,customLeftArrow=this.props.customLeftArrow;return React.createElement(Arrows_1.LeftArrow,{customLeftArrow:customLeftArrow,getState:function(){return _this.getState()},previous:this.previous})},Carousel.prototype.renderRightArrow=function(){var _this=this,customRightArrow=this.props.customRightArrow;return React.createElement(Arrows_1.RightArrow,{customRightArrow:customRightArrow,getState:function(){return _this.getState()},next:this.next})},Carousel.prototype.renderButtonGroups=function(){var _this=this,customButtonGroup=this.props.customButtonGroup;return customButtonGroup?React.cloneElement(customButtonGroup,{previous:function(){return _this.previous()},next:function(){return _this.next()},goToSlide:function(slideIndex){return _this.goToSlide(slideIndex)},carouselState:this.getState()}):null},Carousel.prototype.renderDotsList=function(){var _this=this;return React.createElement(Dots_1.default,{state:this.state,props:this.props,goToSlide:this.goToSlide,getState:function(){return _this.getState()}})},Carousel.prototype.renderCarouselItems=function(){var clones=[];if(this.props.infinite){var childrenArr=React.Children.toArray(this.props.children);clones=utils_1.getClones(this.state.slidesToShow,childrenArr)}return React.createElement(CarouselItems_1.default,{clones:clones,goToSlide:this.goToSlide,state:this.state,props:this.props})},Carousel.prototype.render=function(){var _a=this.props,deviceType=_a.deviceType,arrows=_a.arrows,removeArrowOnDeviceType=_a.removeArrowOnDeviceType,infinite=_a.infinite,containerClass=_a.containerClass,sliderClass=_a.sliderClass,customTransition=_a.customTransition,partialVisbile=_a.partialVisbile,centerMode=_a.centerMode,additionalTransfrom=_a.additionalTransfrom,renderDotsOutside=_a.renderDotsOutside,className=_a.className;"production"!==process.env.NODE_ENV&&utils_1.throwError(this.state,this.props);var _b=utils_1.getInitialState(this.state,this.props),shouldRenderOnSSR=_b.shouldRenderOnSSR,partialVisibilityGutter=_b.partialVisibilityGutter,shouldRenderAtAll=_b.shouldRenderAtAll,isLeftEndReach=utils_1.isInLeftEnd(this.state),isRightEndReach=utils_1.isInRightEnd(this.state),shouldShowArrows=arrows&&!(removeArrowOnDeviceType&&(deviceType&&-1<removeArrowOnDeviceType.indexOf(deviceType)||this.state.deviceType&&-1<removeArrowOnDeviceType.indexOf(this.state.deviceType)))&&!utils_1.notEnoughChildren(this.state,this.props)&&shouldRenderAtAll,disableLeftArrow=!infinite&&isLeftEndReach,disableRightArrow=!infinite&&isRightEndReach,currentTransform=partialVisbile?utils_1.getTransformForPartialVsibile(this.state,partialVisibilityGutter,this.props):centerMode?utils_1.getTransformForCenterMode(this.state,this.props):this.state.transform;return React.createElement(React.Fragment,null,React.createElement("div",{className:"react-multi-carousel-list "+containerClass+" "+className,ref:this.containerRef},React.createElement("ul",{className:"react-multi-carousel-track "+sliderClass,style:{transition:this.isAnimationAllowed?customTransition||defaultTransition:"none",overflow:shouldRenderOnSSR?"hidden":"unset",transform:"translate3d("+(currentTransform+additionalTransfrom)+"px,0,0)"},onMouseMove:this.handleMove,onMouseDown:this.handleDown,onMouseUp:this.handleOut,onMouseEnter:this.handleEnter,onMouseLeave:this.handleOut,onTouchStart:this.handleDown,onTouchMove:this.handleMove,onTouchEnd:this.handleOut},this.renderCarouselItems()),shouldShowArrows&&!disableLeftArrow&&this.renderLeftArrow(),shouldShowArrows&&!disableRightArrow&&this.renderRightArrow(),shouldRenderAtAll&&this.renderButtonGroups(),shouldRenderAtAll&&!renderDotsOutside&&this.renderDotsList()),shouldRenderAtAll&&renderDotsOutside&&this.renderDotsList())},Carousel.defaultProps={slidesToSlide:1,infinite:!1,draggable:!0,swipeable:!0,arrows:!0,containerClass:"",sliderClass:"",itemClass:"",keyBoardControl:!0,autoPlaySpeed:3e3,showDots:!1,renderDotsOutside:!1,minimumTouchDrag:80,dotListClass:"",focusOnSelect:!1,centerMode:!1,additionalTransfrom:0},Carousel}(React.Component);exports.default=Carousel;

2

lib/CarouselItems.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),utils_1=require("./utils"),CarouselItems=function(e){var i=e.props,l=e.state,a=e.goToSlide,t=e.clones,r=l.itemWidth,s=i.children,u=i.infinite,n=i.itemClass,o=i.partialVisbile,c=utils_1.getInitialState(l,i),d=c.flexBisis,m=c.shouldRenderOnSSR,f=c.domFullyLoaded,p=c.paritialVisibilityGutter;return c.shouldRenderAtAll?React.createElement(React.Fragment,null,(u?t:React.Children.toArray(s)).map(function(e,t){return React.createElement("li",{key:t,"data-index":t,onClick:function(){i.focusOnSelect&&a(t)},"aria-hidden":utils_1.getIfSlideIsVisbile(t,l)?"false":"true",style:{flex:m?"1 0 "+d+"%":"auto",position:"relative",width:f?(o&&p?r-p:r)+"px":"auto"},className:"react-multi-carousel-item "+(utils_1.getIfSlideIsVisbile(t,l)?"react-multi-carousel-item--active":"")+" "+n},e)})):null};exports.default=CarouselItems;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),utils_1=require("./utils"),CarouselItems=function(_a){var props=_a.props,state=_a.state,goToSlide=_a.goToSlide,clones=_a.clones,itemWidth=state.itemWidth,children=props.children,infinite=props.infinite,itemClass=props.itemClass,partialVisbile=props.partialVisbile,_b=utils_1.getInitialState(state,props),flexBisis=_b.flexBisis,shouldRenderOnSSR=_b.shouldRenderOnSSR,domFullyLoaded=_b.domFullyLoaded,partialVisibilityGutter=_b.partialVisibilityGutter;return _b.shouldRenderAtAll?React.createElement(React.Fragment,null,(infinite?clones:React.Children.toArray(children)).map(function(child,index){return React.createElement("li",{key:index,"data-index":index,onClick:function(){props.focusOnSelect&&goToSlide(index)},"aria-hidden":utils_1.getIfSlideIsVisbile(index,state)?"false":"true",style:{flex:shouldRenderOnSSR?"1 0 "+flexBisis+"%":"auto",position:"relative",width:domFullyLoaded?(partialVisbile&&partialVisibilityGutter?itemWidth-partialVisibilityGutter:itemWidth)+"px":"auto"},className:"react-multi-carousel-item "+(utils_1.getIfSlideIsVisbile(index,state)?"react-multi-carousel-item--active":"")+" "+itemClass},child)})):null};exports.default=CarouselItems;

2

lib/Dots.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),clones_1=require("./utils/clones"),dots_1=require("./utils/dots"),common_1=require("./utils/common"),Dots=function(e){var t=e.props,l=e.state,n=e.goToSlide,c=e.getState,r=t.showDots,s=t.customDot,o=t.dotListClass,u=t.infinite,a=t.children;if(!r)return null;var i,d=l.currentSlide,m=l.slidesToShow,f=common_1.getSlidesToSlide(l,t),g=React.Children.toArray(a);i=u?Math.ceil(g.length/f):Math.ceil((g.length-m)/f)+1;var h=dots_1.getLookupTableForNextSlides(i,l,t,g),v=clones_1.getOriginalIndexLookupTableByClones(m,g),p=v[d];return React.createElement("ul",{className:"react-multi-carousel-dot-list "+o},Array(i).fill(0).map(function(e,t){var l,r;if(u){r=h[t];var o=v[r];l=p===o||o<=p&&p<o+f}else{var a=g.length-m,i=t*f;l=(r=a<i?a:i)===d||r<d&&d<r+f&&d<g.length-m}return s?React.cloneElement(s,{index:t,active:l,key:t,onClick:function(){return n(r)},carouselState:c()}):React.createElement("li",{"data-index":t,key:t,className:"react-multi-carousel-dot "+(l?"react-multi-carousel-dot--active":"")},React.createElement("button",{onClick:function(){return n(r)}}))}))};exports.default=Dots;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),clones_1=require("./utils/clones"),dots_1=require("./utils/dots"),common_1=require("./utils/common"),Dots=function(_a){var props=_a.props,state=_a.state,goToSlide=_a.goToSlide,getState=_a.getState,showDots=props.showDots,customDot=props.customDot,dotListClass=props.dotListClass,infinite=props.infinite,children=props.children;if(!showDots)return null;var numberOfDotsToShow,currentSlide=state.currentSlide,slidesToShow=state.slidesToShow,slidesToSlide=common_1.getSlidesToSlide(state,props),childrenArr=React.Children.toArray(children);numberOfDotsToShow=infinite?Math.ceil(childrenArr.length/slidesToSlide):Math.ceil((childrenArr.length-slidesToShow)/slidesToSlide)+1;var nextSlidesTable=dots_1.getLookupTableForNextSlides(numberOfDotsToShow,state,props,childrenArr),lookupTable=clones_1.getOriginalIndexLookupTableByClones(slidesToShow,childrenArr),currentSlides=lookupTable[currentSlide];return React.createElement("ul",{className:"react-multi-carousel-dot-list "+dotListClass},Array(numberOfDotsToShow).fill(0).map(function(_,index){var isActive,nextSlide;if(infinite){nextSlide=nextSlidesTable[index];var cloneIndex=lookupTable[nextSlide];isActive=currentSlides===cloneIndex||cloneIndex<=currentSlides&&currentSlides<cloneIndex+slidesToSlide}else{var maximumNextSlide=childrenArr.length-slidesToShow,possibileNextSlides=index*slidesToSlide;isActive=(nextSlide=maximumNextSlide<possibileNextSlides?maximumNextSlide:possibileNextSlides)===currentSlide||nextSlide<currentSlide&&currentSlide<nextSlide+slidesToSlide&&currentSlide<childrenArr.length-slidesToShow}return customDot?React.cloneElement(customDot,{index:index,active:isActive,key:index,onClick:function(){return goToSlide(nextSlide)},carouselState:getState()}):React.createElement("li",{"data-index":index,key:index,className:"react-multi-carousel-dot "+(isActive?"react-multi-carousel-dot--active":"")},React.createElement("button",{onClick:function(){return goToSlide(nextSlide)}}))}))};exports.default=Dots;

5

lib/types.d.ts

@@ -9,2 +9,3 @@ import * as React from "react";

items: number;
partialVisibilityGutter?: number;
paritialVisibilityGutter?: number;

@@ -14,2 +15,3 @@ slidesToSlide?: number;

}
export declare function isMouseMoveEvent(e: React.MouseEvent | React.TouchEvent): e is React.MouseEvent;
export interface CarouselProps {

@@ -80,5 +82,4 @@ responsive: responsiveType;

transform: number;
isSliding?: boolean;
}
export default class Carousel extends React.PureComponent<CarouselProps> {
export default class Carousel extends React.Component<CarouselProps> {
previous: (slidesHavePassed: number) => void;

@@ -85,0 +86,0 @@ next: (slidesHavePassed: number) => void;

2

lib/types.js

@@ -1,1 +0,1 @@

"use strict";var __extends=this&&this.__extends||function(){var n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)};return function(t,e){function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}}();Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),Carousel=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return __extends(e,t),e}(React.PureComponent);exports.default=Carousel;
"use strict";var __extends=this&&this.__extends||function(){var extendStatics=function(d,b){return(extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])})(d,b)};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react");function isMouseMoveEvent(e){return"clientY"in e}exports.isMouseMoveEvent=isMouseMoveEvent;var Carousel=function(_super){function Carousel(){return null!==_super&&_super.apply(this,arguments)||this}return __extends(Carousel,_super),Carousel}(React.Component);exports.default=Carousel;

2

lib/utils/clones.js

@@ -1,1 +0,1 @@

"use strict";function getOriginalCounterPart(e,t,n){var l=t.slidesToShow,o=t.currentSlide;return n.length>2*l?e+2*l:o>=n.length?n.length+e:e}function getOriginalIndexLookupTableByClones(e,t){if(t.length>2*e){for(var n={},l=t.length-2*e,o=t.length-l,i=l,r=0;r<o;r++)n[r]=i,i++;var g=t.length+o,h=g+t.slice(0,2*e).length,s=0;for(r=g;r<=h;r++)n[r]=s,s++;var a=g,c=0;for(r=o;r<a;r++)n[r]=c,c++;return n}n={};var u=3*t.length,d=0;for(r=0;r<u;r++)n[r]=d,++d===t.length&&(d=0);return n}function getClones(e,t){return t.length>2*e?t.slice(t.length-2*e,t.length).concat(t,t.slice(0,2*e)):t.concat(t,t)}function getInitialSlideInInifteMode(e,t){return t.length>2*e?2*e:t.length}function checkClonesPosition(e,t,n){var l,o=e.currentSlide,i=e.slidesToShow,r=e.itemWidth,g=e.totalItems,h=0,s=0,a=0===o,c=t.length-(t.length-2*i);return t.length>2*i?((l=o>=c+t.length)&&(s=-r*(h=o-t.length)),a&&(s=-r*(h=c+(t.length-2*i)))):((l=o>=2*t.length)&&(s=-r*(h=o-t.length)),a&&(s=n.showDots?-r*(h=t.length):-r*(h=g-2*i))),{isReachingTheEnd:l,isReachingTheStart:a,nextSlide:h,nextPosition:s}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getOriginalCounterPart=getOriginalCounterPart,exports.getOriginalIndexLookupTableByClones=getOriginalIndexLookupTableByClones,exports.getClones=getClones,exports.getInitialSlideInInifteMode=getInitialSlideInInifteMode,exports.checkClonesPosition=checkClonesPosition;
"use strict";function getOriginalCounterPart(index,_a,childrenArr){var slidesToShow=_a.slidesToShow,currentSlide=_a.currentSlide;return childrenArr.length>2*slidesToShow?index+2*slidesToShow:currentSlide>=childrenArr.length?childrenArr.length+index:index}function getOriginalIndexLookupTableByClones(slidesToShow,childrenArr){if(childrenArr.length>2*slidesToShow){for(var table={},firstBeginningOfClones=childrenArr.length-2*slidesToShow,firstEndOfClones=childrenArr.length-firstBeginningOfClones,firstCount=firstBeginningOfClones,i=0;i<firstEndOfClones;i++)table[i]=firstCount,firstCount++;var secondBeginningOfClones=childrenArr.length+firstEndOfClones,secondEndOfClones=secondBeginningOfClones+childrenArr.slice(0,2*slidesToShow).length,secondCount=0;for(i=secondBeginningOfClones;i<=secondEndOfClones;i++)table[i]=secondCount,secondCount++;var originalEnd=secondBeginningOfClones,originalCounter=0;for(i=firstEndOfClones;i<originalEnd;i++)table[i]=originalCounter,originalCounter++;return table}table={};var totalSlides=3*childrenArr.length,count=0;for(i=0;i<totalSlides;i++)table[i]=count,++count===childrenArr.length&&(count=0);return table}function getClones(slidesToShow,childrenArr){return childrenArr.length>2*slidesToShow?childrenArr.slice(childrenArr.length-2*slidesToShow,childrenArr.length).concat(childrenArr,childrenArr.slice(0,2*slidesToShow)):childrenArr.concat(childrenArr,childrenArr)}function getInitialSlideInInifteMode(slidesToShow,childrenArr){return childrenArr.length>2*slidesToShow?2*slidesToShow:childrenArr.length}function checkClonesPosition(_a,childrenArr,props){var isReachingTheEnd,currentSlide=_a.currentSlide,slidesToShow=_a.slidesToShow,itemWidth=_a.itemWidth,totalItems=_a.totalItems,nextSlide=0,nextPosition=0,isReachingTheStart=0===currentSlide,originalFirstSlide=childrenArr.length-(childrenArr.length-2*slidesToShow);return childrenArr.length>2*slidesToShow?((isReachingTheEnd=currentSlide>=originalFirstSlide+childrenArr.length)&&(nextPosition=-itemWidth*(nextSlide=currentSlide-childrenArr.length)),isReachingTheStart&&(nextPosition=-itemWidth*(nextSlide=originalFirstSlide+(childrenArr.length-2*slidesToShow)))):((isReachingTheEnd=currentSlide>=2*childrenArr.length)&&(nextPosition=-itemWidth*(nextSlide=currentSlide-childrenArr.length)),isReachingTheStart&&(nextPosition=props.showDots?-itemWidth*(nextSlide=childrenArr.length):-itemWidth*(nextSlide=totalItems-2*slidesToShow))),{isReachingTheEnd:isReachingTheEnd,isReachingTheStart:isReachingTheStart,nextSlide:nextSlide,nextPosition:nextPosition}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getOriginalCounterPart=getOriginalCounterPart,exports.getOriginalIndexLookupTableByClones=getOriginalIndexLookupTableByClones,exports.getClones=getClones,exports.getInitialSlideInInifteMode=getInitialSlideInInifteMode,exports.checkClonesPosition=checkClonesPosition;

4

lib/utils/common.d.ts

@@ -6,3 +6,3 @@ import { CarouselInternalState, CarouselProps } from "../types";

domFullyLoaded: boolean;
paritialVisibilityGutter: number | undefined;
partialVisibilityGutter: number | undefined;
shouldRenderAtAll: boolean;

@@ -12,3 +12,3 @@ };

declare function getTransformForCenterMode(state: CarouselInternalState, props: CarouselProps): number;
declare function getTransformForPartialVsibile(state: CarouselInternalState, paritialVisibilityGutter: number | undefined, props: CarouselProps): number;
declare function getTransformForPartialVsibile(state: CarouselInternalState, partialVisibilityGutter: number | undefined, props: CarouselProps): number;
declare function isInLeftEnd({ currentSlide }: CarouselInternalState): boolean;

@@ -15,0 +15,0 @@ declare function isInRightEnd({ currentSlide, totalItems, slidesToShow, }: CarouselInternalState): boolean;

2

lib/utils/common.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),elementWidth_1=require("./elementWidth");function getInitialState(e,i){var t,r=e.domLoaded,n=e.slidesToShow,o=e.containerWidth,d=e.itemWidth,s=i.deviceType,l=i.responsive,a=i.ssr,h=i.partialVisbile,u=Boolean(r&&n&&o&&d);a&&s&&!u&&(t=elementWidth_1.getWidthFromDeviceType(s,l));var c=Boolean(a&&s&&!u&&t);return{shouldRenderOnSSR:c,flexBisis:t,domFullyLoaded:u,paritialVisibilityGutter:elementWidth_1.getParitialVisibilityGutter(l,h,s,e.deviceType),shouldRenderAtAll:c||u}}function getIfSlideIsVisbile(e,i){var t=i.currentSlide,r=i.slidesToShow;return t<=e&&e<t+r}function getTransformForCenterMode(e,i){return 0!==e.currentSlide||i.infinite?e.transform+e.itemWidth/2:e.transform}function getTransformForPartialVsibile(e,i,t){void 0===i&&(i=0);var r=e.currentSlide,n=e.slidesToShow,o=isInRightEnd(e),d=!t.infinite&&o,s=e.transform+r*i;return d?s+(e.containerWidth-(e.itemWidth-i)*n):s}function isInLeftEnd(e){return!(0<e.currentSlide)}function isInRightEnd(e){var i=e.currentSlide,t=e.totalItems;return!(i+e.slidesToShow<t)}function notEnoughChildren(e,i,t){var r=React.Children.toArray(i.children),n=e.slidesToShow;return t?r.length<t:r.length<n}function getSlidesToSlide(e,i){var t=e.domLoaded,r=e.slidesToShow,n=e.containerWidth,o=e.itemWidth,d=i.deviceType,s=i.responsive,l=i.slidesToSlide||1,a=Boolean(t&&r&&n&&o);return i.ssr&&i.deviceType&&!a&&Object.keys(s).forEach(function(e){var i=s[e].slidesToSlide;d===e&&i&&(l=i)}),a&&Object.keys(s).forEach(function(e){var i=s[e],t=i.breakpoint,r=i.slidesToSlide,n=t.max,o=t.min;r&&window.innerWidth>=o&&window.innerWidth<=n&&(l=r)}),l}exports.getInitialState=getInitialState,exports.getIfSlideIsVisbile=getIfSlideIsVisbile,exports.getTransformForCenterMode=getTransformForCenterMode,exports.getTransformForPartialVsibile=getTransformForPartialVsibile,exports.isInLeftEnd=isInLeftEnd,exports.isInRightEnd=isInRightEnd,exports.notEnoughChildren=notEnoughChildren,exports.getSlidesToSlide=getSlidesToSlide;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),elementWidth_1=require("./elementWidth");function getInitialState(state,props){var flexBisis,domLoaded=state.domLoaded,slidesToShow=state.slidesToShow,containerWidth=state.containerWidth,itemWidth=state.itemWidth,deviceType=props.deviceType,responsive=props.responsive,ssr=props.ssr,partialVisbile=props.partialVisbile,domFullyLoaded=Boolean(domLoaded&&slidesToShow&&containerWidth&&itemWidth);ssr&&deviceType&&!domFullyLoaded&&(flexBisis=elementWidth_1.getWidthFromDeviceType(deviceType,responsive));var shouldRenderOnSSR=Boolean(ssr&&deviceType&&!domFullyLoaded&&flexBisis);return{shouldRenderOnSSR:shouldRenderOnSSR,flexBisis:flexBisis,domFullyLoaded:domFullyLoaded,partialVisibilityGutter:elementWidth_1.getPartialVisibilityGutter(responsive,partialVisbile,deviceType,state.deviceType),shouldRenderAtAll:shouldRenderOnSSR||domFullyLoaded}}function getIfSlideIsVisbile(index,state){var currentSlide=state.currentSlide,slidesToShow=state.slidesToShow;return currentSlide<=index&&index<currentSlide+slidesToShow}function getTransformForCenterMode(state,props){return 0!==state.currentSlide||props.infinite?state.transform+state.itemWidth/2:state.transform}function getTransformForPartialVsibile(state,partialVisibilityGutter,props){void 0===partialVisibilityGutter&&(partialVisibilityGutter=0);var currentSlide=state.currentSlide,slidesToShow=state.slidesToShow,isRightEndReach=isInRightEnd(state),shouldRemoveRightGutter=!props.infinite&&isRightEndReach,transform=state.transform+currentSlide*partialVisibilityGutter;return shouldRemoveRightGutter?transform+(state.containerWidth-(state.itemWidth-partialVisibilityGutter)*slidesToShow):transform}function isInLeftEnd(_a){return!(0<_a.currentSlide)}function isInRightEnd(_a){var currentSlide=_a.currentSlide,totalItems=_a.totalItems;return!(currentSlide+_a.slidesToShow<totalItems)}function notEnoughChildren(state,props,items){var childrenArr=React.Children.toArray(props.children),slidesToShow=state.slidesToShow;return items?childrenArr.length<items:childrenArr.length<slidesToShow}function getSlidesToSlide(state,props){var domLoaded=state.domLoaded,slidesToShow=state.slidesToShow,containerWidth=state.containerWidth,itemWidth=state.itemWidth,deviceType=props.deviceType,responsive=props.responsive,slidesToScroll=props.slidesToSlide||1,domFullyLoaded=Boolean(domLoaded&&slidesToShow&&containerWidth&&itemWidth);return props.ssr&&props.deviceType&&!domFullyLoaded&&Object.keys(responsive).forEach(function(device){var slidesToSlide=responsive[device].slidesToSlide;deviceType===device&&slidesToSlide&&(slidesToScroll=slidesToSlide)}),domFullyLoaded&&Object.keys(responsive).forEach(function(item){var _a=responsive[item],breakpoint=_a.breakpoint,slidesToSlide=_a.slidesToSlide,max=breakpoint.max,min=breakpoint.min;slidesToSlide&&window.innerWidth>=min&&window.innerWidth<=max&&(slidesToScroll=slidesToSlide)}),slidesToScroll}exports.getInitialState=getInitialState,exports.getIfSlideIsVisbile=getIfSlideIsVisbile,exports.getTransformForCenterMode=getTransformForCenterMode,exports.getTransformForPartialVsibile=getTransformForPartialVsibile,exports.isInLeftEnd=isInLeftEnd,exports.isInRightEnd=isInRightEnd,exports.notEnoughChildren=notEnoughChildren,exports.getSlidesToSlide=getSlidesToSlide;

2

lib/utils/dots.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var clones_1=require("./clones"),common_1=require("./common");function getLookupTableForNextSlides(e,l,o,i){var n={},s=common_1.getSlidesToSlide(l,o);return Array(e).fill(0).forEach(function(e,o){var r=clones_1.getOriginalCounterPart(o,l,i);if(0===o)n[0]=r;else{var t=n[o-1]+s;n[o]=t}}),n}exports.getLookupTableForNextSlides=getLookupTableForNextSlides;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var clones_1=require("./clones"),common_1=require("./common");function getLookupTableForNextSlides(numberOfDotsToShow,state,props,childrenArr){var table={},slidesToSlide=common_1.getSlidesToSlide(state,props);return Array(numberOfDotsToShow).fill(0).forEach(function(_,i){var nextSlide=clones_1.getOriginalCounterPart(i,state,childrenArr);if(0===i)table[0]=nextSlide;else{var now=table[i-1]+slidesToSlide;table[i]=now}}),table}exports.getLookupTableForNextSlides=getLookupTableForNextSlides;

4

lib/utils/elementWidth.d.ts
import { responsiveType, CarouselProps } from "../types";
declare function getParitialVisibilityGutter(responsive: responsiveType, partialVisbile?: boolean, serverSideDeviceType?: string | undefined, clientSideDeviceType?: string | undefined): number | undefined;
declare function getPartialVisibilityGutter(responsive: responsiveType, partialVisbile?: boolean, serverSideDeviceType?: string | undefined, clientSideDeviceType?: string | undefined): number | undefined;
declare function getWidthFromDeviceType(deviceType: string, responsive: responsiveType): number | string | undefined;
declare function getItemClientSideWidth(props: CarouselProps, slidesToShow: number, containerWidth: number): number;
export { getWidthFromDeviceType, getParitialVisibilityGutter, getItemClientSideWidth };
export { getWidthFromDeviceType, getPartialVisibilityGutter, getItemClientSideWidth, };

2

lib/utils/elementWidth.js

@@ -1,1 +0,1 @@

"use strict";function getParitialVisibilityGutter(t,e,i,r){var n=0,o=r||i;return e&&o&&(n=t[o].paritialVisibilityGutter),n}function getWidthFromDeviceType(t,e){var i;e[t]&&(i=(100/e[t].items).toFixed(1));return i}function getItemClientSideWidth(t,e,i){return Math.round(i/(e+(t.centerMode?1:0)))}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getParitialVisibilityGutter=getParitialVisibilityGutter,exports.getWidthFromDeviceType=getWidthFromDeviceType,exports.getItemClientSideWidth=getItemClientSideWidth;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var hasWarnAboutTypo=!1;function getPartialVisibilityGutter(responsive,partialVisbile,serverSideDeviceType,clientSideDeviceType){var gutter=0,deviceType=clientSideDeviceType||serverSideDeviceType;return partialVisbile&&deviceType&&(!hasWarnAboutTypo&&"production"!==process.env.NODE_ENV&&responsive[deviceType].paritialVisibilityGutter&&(hasWarnAboutTypo=!0,console.warn("You appear to be using paritialVisibilityGutter instead of partialVisibilityGutter which will be moved to partialVisibilityGutter in the future completely")),gutter=responsive[deviceType].partialVisibilityGutter||responsive[deviceType].paritialVisibilityGutter),gutter}function getWidthFromDeviceType(deviceType,responsive){var itemWidth;responsive[deviceType]&&(itemWidth=(100/responsive[deviceType].items).toFixed(1));return itemWidth}function getItemClientSideWidth(props,slidesToShow,containerWidth){return Math.round(containerWidth/(slidesToShow+(props.centerMode?1:0)))}exports.getPartialVisibilityGutter=getPartialVisibilityGutter,exports.getWidthFromDeviceType=getWidthFromDeviceType,exports.getItemClientSideWidth=getItemClientSideWidth;

4

lib/utils/index.d.ts
import { getOriginalCounterPart, getClones, checkClonesPosition, getInitialSlideInInifteMode } from "./clones";
import { getWidthFromDeviceType, getParitialVisibilityGutter, getItemClientSideWidth } from "./elementWidth";
import { getWidthFromDeviceType, getPartialVisibilityGutter, getItemClientSideWidth } from "./elementWidth";
import { getInitialState, getIfSlideIsVisbile, getTransformForCenterMode, getTransformForPartialVsibile, isInLeftEnd, isInRightEnd, notEnoughChildren, getSlidesToSlide } from "./common";

@@ -9,2 +9,2 @@ import throttle from "./throttle";

import { populateSlidesOnMouseTouchMove } from "./mouseOrTouchMove";
export { isInLeftEnd, isInRightEnd, getOriginalCounterPart, getClones, getSlidesToSlide, getWidthFromDeviceType, checkClonesPosition, getItemClientSideWidth, getParitialVisibilityGutter, throttle, getInitialState, getIfSlideIsVisbile, getTransformForCenterMode, getTransformForPartialVsibile, throwError, populateNextSlides, populatePreviousSlides, populateSlidesOnMouseTouchMove, notEnoughChildren, getInitialSlideInInifteMode };
export { isInLeftEnd, isInRightEnd, getOriginalCounterPart, getClones, getSlidesToSlide, getWidthFromDeviceType, checkClonesPosition, getItemClientSideWidth, getPartialVisibilityGutter, throttle, getInitialState, getIfSlideIsVisbile, getTransformForCenterMode, getTransformForPartialVsibile, throwError, populateNextSlides, populatePreviousSlides, populateSlidesOnMouseTouchMove, notEnoughChildren, getInitialSlideInInifteMode };

2

lib/utils/index.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var clones_1=require("./clones");exports.getOriginalCounterPart=clones_1.getOriginalCounterPart,exports.getClones=clones_1.getClones,exports.checkClonesPosition=clones_1.checkClonesPosition,exports.getInitialSlideInInifteMode=clones_1.getInitialSlideInInifteMode;var elementWidth_1=require("./elementWidth");exports.getWidthFromDeviceType=elementWidth_1.getWidthFromDeviceType,exports.getParitialVisibilityGutter=elementWidth_1.getParitialVisibilityGutter,exports.getItemClientSideWidth=elementWidth_1.getItemClientSideWidth;var common_1=require("./common");exports.getInitialState=common_1.getInitialState,exports.getIfSlideIsVisbile=common_1.getIfSlideIsVisbile,exports.getTransformForCenterMode=common_1.getTransformForCenterMode,exports.getTransformForPartialVsibile=common_1.getTransformForPartialVsibile,exports.isInLeftEnd=common_1.isInLeftEnd,exports.isInRightEnd=common_1.isInRightEnd,exports.notEnoughChildren=common_1.notEnoughChildren,exports.getSlidesToSlide=common_1.getSlidesToSlide;var throttle_1=require("./throttle");exports.throttle=throttle_1.default;var throwError_1=require("./throwError");exports.throwError=throwError_1.default;var next_1=require("./next");exports.populateNextSlides=next_1.populateNextSlides;var previous_1=require("./previous");exports.populatePreviousSlides=previous_1.populatePreviousSlides;var mouseOrTouchMove_1=require("./mouseOrTouchMove");exports.populateSlidesOnMouseTouchMove=mouseOrTouchMove_1.populateSlidesOnMouseTouchMove;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var clones_1=require("./clones");exports.getOriginalCounterPart=clones_1.getOriginalCounterPart,exports.getClones=clones_1.getClones,exports.checkClonesPosition=clones_1.checkClonesPosition,exports.getInitialSlideInInifteMode=clones_1.getInitialSlideInInifteMode;var elementWidth_1=require("./elementWidth");exports.getWidthFromDeviceType=elementWidth_1.getWidthFromDeviceType,exports.getPartialVisibilityGutter=elementWidth_1.getPartialVisibilityGutter,exports.getItemClientSideWidth=elementWidth_1.getItemClientSideWidth;var common_1=require("./common");exports.getInitialState=common_1.getInitialState,exports.getIfSlideIsVisbile=common_1.getIfSlideIsVisbile,exports.getTransformForCenterMode=common_1.getTransformForCenterMode,exports.getTransformForPartialVsibile=common_1.getTransformForPartialVsibile,exports.isInLeftEnd=common_1.isInLeftEnd,exports.isInRightEnd=common_1.isInRightEnd,exports.notEnoughChildren=common_1.notEnoughChildren,exports.getSlidesToSlide=common_1.getSlidesToSlide;var throttle_1=require("./throttle");exports.throttle=throttle_1.default;var throwError_1=require("./throwError");exports.throwError=throwError_1.default;var next_1=require("./next");exports.populateNextSlides=next_1.populateNextSlides;var previous_1=require("./previous");exports.populatePreviousSlides=previous_1.populatePreviousSlides;var mouseOrTouchMove_1=require("./mouseOrTouchMove");exports.populateSlidesOnMouseTouchMove=mouseOrTouchMove_1.populateSlidesOnMouseTouchMove;

2

lib/utils/mouseOrTouchMove.js

@@ -1,1 +0,1 @@

"use strict";function populateSlidesOnMouseTouchMove(e,t,o,i,n){var s,u,r=e.itemWidth,a=e.slidesToShow,l=e.totalItems,d=e.transform,M=e.currentSlide,h=t.infinite,c=!1,p=Math.round((o-i)/r),f=Math.round((i-o)/r),v=o<n;if(n<o&&!!(p<=a)){s="right";var S=Math.abs(-r*(l-a)),O=d-(i-n),T=M===l-a;(Math.abs(O)<=S||T&&h)&&(u=O,c=!0)}v&&f<=a&&(s="left",((O=d+(n-i))<=0||0===M&&h)&&(c=!0,u=O));return{direction:s,nextPosition:u,canContinue:c}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.populateSlidesOnMouseTouchMove=populateSlidesOnMouseTouchMove;
"use strict";function populateSlidesOnMouseTouchMove(state,props,initialX,lastX,clientX){var direction,nextPosition,itemWidth=state.itemWidth,slidesToShow=state.slidesToShow,totalItems=state.totalItems,transform=state.transform,currentSlide=state.currentSlide,infinite=props.infinite,canContinue=!1,slidesHavePassedRight=Math.round((initialX-lastX)/itemWidth),slidesHavePassedLeft=Math.round((lastX-initialX)/itemWidth),isMovingLeft=initialX<clientX;if(clientX<initialX&&!!(slidesHavePassedRight<=slidesToShow)){direction="right";var translateXLimit=Math.abs(-itemWidth*(totalItems-slidesToShow)),nextTranslate=transform-(lastX-clientX),isLastSlide=currentSlide===totalItems-slidesToShow;(Math.abs(nextTranslate)<=translateXLimit||isLastSlide&&infinite)&&(nextPosition=nextTranslate,canContinue=!0)}isMovingLeft&&slidesHavePassedLeft<=slidesToShow&&(direction="left",((nextTranslate=transform+(clientX-lastX))<=0||0===currentSlide&&infinite)&&(canContinue=!0,nextPosition=nextTranslate));return{direction:direction,nextPosition:nextPosition,canContinue:canContinue}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.populateSlidesOnMouseTouchMove=populateSlidesOnMouseTouchMove;

2

lib/utils/next.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var common_1=require("./common");function populateNextSlides(e,t,o){void 0===o&&(o=0);var i,l,s=e.slidesToShow,d=e.currentSlide,r=e.itemWidth,n=e.totalItems,u=common_1.getSlidesToSlide(e,t),p=d+1+o+s+(0<o?0:u);return l=p<=n?-r*(i=d+o+(0<o?0:u)):n<p&&d!==n-s?-r*(i=n-s):i=void 0,{nextSlides:i,nextPosition:l}}exports.populateNextSlides=populateNextSlides;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var common_1=require("./common");function populateNextSlides(state,props,slidesHavePassed){void 0===slidesHavePassed&&(slidesHavePassed=0);var nextSlides,nextPosition,slidesToShow=state.slidesToShow,currentSlide=state.currentSlide,itemWidth=state.itemWidth,totalItems=state.totalItems,slidesToSlide=common_1.getSlidesToSlide(state,props),nextMaximumSlides=currentSlide+1+slidesHavePassed+slidesToShow+(0<slidesHavePassed?0:slidesToSlide);return nextPosition=nextMaximumSlides<=totalItems?-itemWidth*(nextSlides=currentSlide+slidesHavePassed+(0<slidesHavePassed?0:slidesToSlide)):totalItems<nextMaximumSlides&&currentSlide!==totalItems-slidesToShow?-itemWidth*(nextSlides=totalItems-slidesToShow):nextSlides=void 0,{nextSlides:nextSlides,nextPosition:nextPosition}}exports.populateNextSlides=populateNextSlides;

2

lib/utils/previous.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),common_1=require("./common"),common_2=require("./common");function populatePreviousSlides(e,o,i){void 0===i&&(i=0);var t,r,n=e.currentSlide,s=e.itemWidth,d=e.slidesToShow,l=o.children,u=o.showDots,c=o.infinite,m=common_1.getSlidesToSlide(e,o),a=n-i-(0<i?0:m),p=(React.Children.toArray(l).length-d)%m;return r=0<=a?(t=a,u&&!c&&0<p&&common_2.isInRightEnd(e)&&(t=n-p),-s*t):t=a<0&&0!==n?0:void 0,{nextSlides:t,nextPosition:r}}exports.populatePreviousSlides=populatePreviousSlides;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),common_1=require("./common"),common_2=require("./common");function populatePreviousSlides(state,props,slidesHavePassed){void 0===slidesHavePassed&&(slidesHavePassed=0);var nextSlides,nextPosition,currentSlide=state.currentSlide,itemWidth=state.itemWidth,slidesToShow=state.slidesToShow,children=props.children,showDots=props.showDots,infinite=props.infinite,slidesToSlide=common_1.getSlidesToSlide(state,props),nextMaximumSlides=currentSlide-slidesHavePassed-(0<slidesHavePassed?0:slidesToSlide),additionalSlides=(React.Children.toArray(children).length-slidesToShow)%slidesToSlide;return nextPosition=0<=nextMaximumSlides?(nextSlides=nextMaximumSlides,showDots&&!infinite&&0<additionalSlides&&common_2.isInRightEnd(state)&&(nextSlides=currentSlide-additionalSlides),-itemWidth*nextSlides):nextSlides=nextMaximumSlides<0&&0!==currentSlide?0:void 0,{nextSlides:nextSlides,nextPosition:nextPosition}}exports.populatePreviousSlides=populatePreviousSlides;

2

lib/utils/throttle.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var throttle=function(e,o,n){var r;return function(){var t=arguments;r||(e.apply(this,t),r=!0,"function"==typeof n&&n(!0),setTimeout(function(){r=!1,"function"==typeof n&&n(!1)},o))}};exports.default=throttle;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var throttle=function(func,limit,setIsInThrottle){var inThrottle;return function(){var args=arguments;inThrottle||(func.apply(this,args),inThrottle=!0,"function"==typeof setIsInThrottle&&setIsInThrottle(!0),setTimeout(function(){inThrottle=!1,"function"==typeof setIsInThrottle&&setIsInThrottle(!1)},limit))}};exports.default=throttle;

2

lib/utils/throwError.js

@@ -1,1 +0,1 @@

"use strict";function throwError(e,r){var o=r.partialVisbile,t=r.centerMode,i=r.ssr,n=r.responsive;r.infinite;if(o&&t)throw new Error("center mode can not be used at the same time with partialVisbile");if(!n)throw i?new Error("ssr mode need to be used in conjunction with responsive prop"):new Error("Responsive prop is needed for deciding the amount of items to show on the screen");if(n&&"object"!=typeof n)throw new Error("responsive prop must be an object")}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=throwError;
"use strict";function throwError(state,props){var partialVisbile=props.partialVisbile,centerMode=props.centerMode,ssr=props.ssr,responsive=props.responsive;props.infinite;if(partialVisbile&&centerMode)throw new Error("center mode can not be used at the same time with partialVisbile");if(!responsive)throw ssr?new Error("ssr mode need to be used in conjunction with responsive prop"):new Error("Responsive prop is needed for deciding the amount of items to show on the screen");if(responsive&&"object"!=typeof responsive)throw new Error("responsive prop must be an object")}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=throwError;

2

minify.js

@@ -12,3 +12,3 @@ const UglifyJS = require("uglify-js");

{ [fileName]: fs.readFileSync(fileName, "utf8") },
{ mangle: true }
{ mangle: false }
).code,

@@ -15,0 +15,0 @@ "utf8"

2

package.json
{
"name": "react-multi-carousel",
"private": false,
"version": "2.2.2",
"version": "2.2.4",
"description": "Production-ready, lightweight fully customizable React carousel component that rocks supports multiple items and SSR(Server-side rendering) with typescript.",

@@ -6,0 +6,0 @@ "main": "index.js",

62

README.md

@@ -9,2 +9,5 @@ # react-multi-carousel 👋

[![npm version](https://badge.fury.io/js/react-multi-carousel.svg)](https://www.npmjs.com/package/react-multi-carousel)
<a href="https://www.npmjs.com/package/react-multi-carousel">
<img alt="download per month" src="https://img.shields.io/npm/dm/react-multi-carousel" target="_blank" />
</a>
[![Build Status](https://api.travis-ci.org/YIZHUANG/react-multi-carousel.svg?branch=master)](https://travis-ci.org/YIZHUANG/react-multi-carousel)

@@ -28,11 +31,6 @@ <a href="https://w3js.com/react-multi-carousel">

### Breaking changes in 2.0.
### Job.
This only concerns the people who are using the dots.
If you have any good developer jobs in the Helsinki area, please don't hesitate to contact the author.
- The behavior of the dot mode now has been changed and improved to be responsive and all the edge cases are handled nicely. For a better look please refer to the demo in the [documentation](https://w3js.com/react-multi-carousel).
- slidesToSlide can now be added for each break-point in the responsive props if specified, otherwise the this.props.slidesToSlide is used by default. New usage can be found either below or [here](https://github.com/YIZHUANG/react-multi-carousel/blob/master/src/types.ts).
This documentation of this change can also be found at the [release log](https://github.com/YIZHUANG/react-multi-carousel/releases/tag/2.0)
### Features.

@@ -118,2 +116,34 @@

## Minimum working set up.
```js
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
const responsive = {
superLargeDesktop: {
// the naming can be any, depends on you.
breakpoint: { max: 4000, min: 3000 },
items: 5,
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3,
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2,
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
},
};
<Carousel responsive={responsive}>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</Carousel>;
```
## Common Usage

@@ -247,7 +277,7 @@

Shows the next items paritially, this is very useful if you want to indicate to the users that this carousel component is swipable, has more items behind it.
Shows the next items partially, this is very useful if you want to indicate to the users that this carousel component is swipable, has more items behind it.
This is different from the "centerMode" prop, as it only shows the next items. For the centerMode, it shows both.
[An Example](https://w3js.com/react-multi-carousel/?selectedKind=Carousel&selectedStory=paritially%20visibie%20on%20next%20items&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel).
[An Example](https://w3js.com/react-multi-carousel/?selectedKind=Carousel&selectedStory=partially%20visibie%20on%20next%20items&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel).

@@ -259,3 +289,3 @@ ```js

items: 3,
paritialVisibilityGutter: 40 // this is needed to tell the amount of px that should be visible.
partialVisibilityGutter: 40 // this is needed to tell the amount of px that should be visible.
},

@@ -265,3 +295,3 @@ tablet: {

items: 2,
paritialVisibilityGutter: 30 // this is needed to tell the amount of px that should be visible.
partialVisibilityGutter: 30 // this is needed to tell the amount of px that should be visible.
},

@@ -271,3 +301,3 @@ mobile: {

items: 1,
paritialVisibilityGutter: 30 // this is needed to tell the amount of px that should be visible.
partialVisibilityGutter: 30 // this is needed to tell the amount of px that should be visible.
}

@@ -283,3 +313,3 @@ }

Shows the next items and previous items paritially.
Shows the next items and previous items partially.

@@ -420,4 +450,4 @@ ```js

| autoPlaySpeed | `number` | 3000 | The unit is ms |
| showDots | `boolean` | `false` | Hide the default dot list |
| renderDotsOutside | `boolean` | `false` | Show dots outside of the container |
| showDots | `boolean` | `false` | Hide the default dot list |
| renderDotsOutside | `boolean` | `false` | Show dots outside of the container |
| partialVisbile | `boolean | string` | `false` | Show partial next slides. This is use with the `responsive` prop, see example for details |

@@ -427,3 +457,3 @@ | customTransition | `string` | `transform 300ms ease-in-out` | Configure your own anaimation when sliding |

| focusOnSelect | `boolean |`false` | Go to slide on click and make the slide a current slide. |
| centerMode | `boolean |`false` | Shows the next items and previous items paritially. |
| centerMode | `boolean |`false` | Shows the next items and previous items partially. |
| additionalTransfrom | `number |`0` | additional transfrom to the current one. |

@@ -430,0 +460,0 @@ 

lib/Carousel.js.map

Sorry, the diff of this file is not supported yet

lib/CarouselItems.js.map

Sorry, the diff of this file is not supported yet

lib/types.js.map

Sorry, the diff of this file is not supported yet

lib/utils/common.js.map

Sorry, the diff of this file is not supported yet

lib/utils/elementWidth.js.map

Sorry, the diff of this file is not supported yet

lib/utils/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc