New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-multi-carousel
Advanced tools
react-multi-carousel - npm Package Compare versions
Comparing version 1.1.4 to 1.1.5
@@ -102,3 +102,14 @@ "use strict"; | ||
| resetAllItems() { | ||
| this.setState({ transform: 0, currentSlide: 0 }); | ||
| const { afterChanged, beforeChanged } = this.props; | ||
| const previousSlide = this.state.currentSlide; | ||
| if (typeof beforeChanged === 'function') { | ||
| beforeChanged(0, this.getState()); | ||
| } | ||
| this.setState({ transform: 0, currentSlide: 0 }, () => { | ||
| if (typeof afterChanged === "function") { | ||
| setTimeout(() => { | ||
| afterChanged(previousSlide, this.getState()); | ||
| }, this.props.transitionDuration || defaultTransitionDuration); | ||
| } | ||
| }); | ||
| } | ||
@@ -108,3 +119,3 @@ next(slidesHavePassed = 0) { | ||
| const { slidesToShow } = this.state; | ||
| const { slidesToSlide, infinite } = this.props; | ||
| const { slidesToSlide, infinite, afterChanged, beforeChanged } = this.props; | ||
| const nextMaximumSlides = this.state.currentSlide + | ||
@@ -117,6 +128,16 @@ 1 + | ||
| const nextPosition = -(this.state.itemWidth * nextSlides); | ||
| const previousSlide = this.state.currentSlide; | ||
| if (nextMaximumSlides <= this.state.totalItems) { | ||
| if (typeof beforeChanged === 'function') { | ||
| beforeChanged(nextSlides, this.getState()); | ||
| } | ||
| this.setState({ | ||
| transform: nextPosition, | ||
| currentSlide: nextSlides | ||
| }, () => { | ||
| if (typeof afterChanged === "function") { | ||
| setTimeout(() => { | ||
| afterChanged(previousSlide, this.getState()); | ||
| }, this.props.transitionDuration || defaultTransitionDuration); | ||
| } | ||
| }); | ||
@@ -129,5 +150,14 @@ } | ||
| const maxPosition = -(this.state.itemWidth * maxSlides); | ||
| if (typeof beforeChanged === 'function') { | ||
| beforeChanged(maxSlides, this.getState()); | ||
| } | ||
| this.setState({ | ||
| transform: maxPosition, | ||
| currentSlide: maxSlides | ||
| }, () => { | ||
| if (typeof afterChanged === "function") { | ||
| setTimeout(() => { | ||
| afterChanged(previousSlide, this.getState()); | ||
| }, this.props.transitionDuration || defaultTransitionDuration); | ||
| } | ||
| }); | ||
@@ -144,9 +174,19 @@ } | ||
| const { slidesToShow } = this.state; | ||
| const { slidesToSlide, infinite } = this.props; | ||
| const { slidesToSlide, infinite, afterChanged, beforeChanged } = this.props; | ||
| const nextSlides = this.state.currentSlide - slidesHavePassed - slidesToSlide; | ||
| const nextPosition = -(this.state.itemWidth * nextSlides); | ||
| const previousSlide = this.state.currentSlide; | ||
| if (nextSlides >= 0) { | ||
| if (typeof beforeChanged === 'function') { | ||
| beforeChanged(nextSlides, this.getState()); | ||
| } | ||
| this.setState({ | ||
| transform: nextPosition, | ||
| currentSlide: nextSlides | ||
| }, () => { | ||
| if (typeof afterChanged === "function") { | ||
| setTimeout(() => { | ||
| afterChanged(previousSlide, this.getState()); | ||
| }, this.props.transitionDuration || defaultTransitionDuration); | ||
| } | ||
| }); | ||
@@ -156,5 +196,14 @@ } | ||
| // prevent oversliding. | ||
| if (typeof beforeChanged === 'function') { | ||
| beforeChanged(0, this.getState()); | ||
| } | ||
| this.setState({ | ||
| transform: 0, | ||
| currentSlide: 0 | ||
| }, () => { | ||
| if (typeof afterChanged === "function") { | ||
| setTimeout(() => { | ||
| afterChanged(previousSlide, this.getState()); | ||
| }, this.props.transitionDuration || defaultTransitionDuration); | ||
| } | ||
| }); | ||
@@ -166,5 +215,14 @@ } | ||
| if (infinite) { | ||
| if (typeof beforeChanged === 'function') { | ||
| beforeChanged(maxSlides, this.getState()); | ||
| } | ||
| this.setState({ | ||
| transform: maxPosition, | ||
| currentSlide: maxSlides | ||
| }, () => { | ||
| if (typeof afterChanged === "function") { | ||
| setTimeout(() => { | ||
| afterChanged(previousSlide, this.getState()); | ||
| }, this.props.transitionDuration || defaultTransitionDuration); | ||
| } | ||
| }); | ||
@@ -285,5 +343,16 @@ } | ||
| const { itemWidth } = this.state; | ||
| const { afterChanged, beforeChanged } = this.props; | ||
| const previousSlide = this.state.currentSlide; | ||
| if (typeof beforeChanged === 'function') { | ||
| beforeChanged(slide, this.getState()); | ||
| } | ||
| this.setState({ | ||
| currentSlide: slide, | ||
| transform: -(itemWidth * slide) | ||
| }, () => { | ||
| if (typeof afterChanged === "function") { | ||
| setTimeout(() => { | ||
| afterChanged(previousSlide, this.getState()); | ||
| }, this.props.transitionDuration || defaultTransitionDuration); | ||
| } | ||
| }); | ||
@@ -290,0 +359,0 @@ } |
@@ -26,2 +26,4 @@ /// <reference types="react" /> | ||
| minimumTouchDrag: number; | ||
| afterChanged?: (previousSlide: number, state: any) => void; | ||
| beforeChanged?: (nextSlide: number, state: any) => void; | ||
| contentClassName?: string; | ||
@@ -28,0 +30,0 @@ itemClassName?: string; |
| { | ||
| "name": "react-multi-carousel", | ||
| "version": "1.1.4", | ||
| "version": "1.1.5", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
157
README.md
@@ -46,3 +46,3 @@ # react-multi-carousel | ||
| For example, we want to show 3 items at the same time on desktop (screen size 1024 - 2000px possibily) and 2 items on tablet(700px - 1024px) and 1 item on mobile. ---> this can be achieved through user-agent detection. | ||
| For example, we want to show 3 items at the same time on desktop (screen size 1024 - 2000px possibily) and 2 items on tablet(700px - 1024px) and 1 item on mobile. ---> this can be achieved through user-agent detection. | ||
@@ -57,19 +57,17 @@ More detailed can be found in this blog post [here](https://w3js.com/index.php/2019/03/06/react-carousel-with-server-side-rendering-support-part-1z/). | ||
| * Server-side rendering | ||
| * Infinite mode | ||
| * Custom animation | ||
| * AutoPlay mode | ||
| * Responsive | ||
| * Swipe to slide | ||
| * Mouse drag to slide | ||
| * Keyboard control to slide | ||
| * Multiple items | ||
| * Show / hide arrows | ||
| * Custom arrows / control buttons | ||
| * Custom dots | ||
| * Custom styling | ||
| * Accessibility support | ||
| - Server-side rendering | ||
| - Infinite mode | ||
| - Custom animation | ||
| - AutoPlay mode | ||
| - Responsive | ||
| - Swipe to slide | ||
| - Mouse drag to slide | ||
| - Keyboard control to slide | ||
| - Multiple items | ||
| - Show / hide arrows | ||
| - Custom arrows / control buttons | ||
| - Custom dots | ||
| - Custom styling | ||
| - Accessibility support | ||
| ## Examples | ||
@@ -116,5 +114,6 @@ | ||
| ## Custom Arrows. | ||
| You can pass your own custom arrows to make it the way you want, the same for the position. For example, add media query for the arrows to go under when on smaller screens. | ||
| You custom arrows will receive a list of props/state that's passed back by the carousel such as the currentSide, is dragging or swiping in progress. | ||
| You custom arrows will receive a list of props/state that's passed back by the carousel such as the currentSide, is dragging or swiping in progress. | ||
@@ -131,5 +130,6 @@ ``` | ||
| ## Custom dots. | ||
| You can pass your own custom dots to replace the default one | ||
| You custom dots will receive a list of props/state that's passed back by the carousel such as the currentSide, is dragging or swiping in progress. | ||
| You custom dots will receive a list of props/state that's passed back by the carousel such as the currentSide, is dragging or swiping in progress. | ||
@@ -150,2 +150,3 @@ ``` | ||
| ``` | ||
| const CarouselItem = ({ isvisible, currentSlide, onMove }) => { | ||
@@ -163,32 +164,86 @@ return <div onClick={(e) => { | ||
| </Carousel> | ||
| ``` | ||
| ## afterChanged call back. | ||
| This is a callback function that is invoked each time there has been a sliding. | ||
| ``` | ||
| <Carousel afterChanged={(previousSlide, { currentSlide, onMove }) => { | ||
| doSpeicalThing() | ||
| }}> | ||
| </Carousel> | ||
| ``` | ||
| ## beforeChanged call back | ||
| This is a callback function that is invoked each time before a sliding. | ||
| ``` | ||
| <Carousel beforeChanged={(nextSlide, { currentSlide, onMove }) => { | ||
| doSpeicalThing() | ||
| }}> | ||
| </Carousel> | ||
| ``` | ||
| ## Combine beforeChanged and nextChanged, real usage. | ||
| They are very useful in the following cases: | ||
| - The carousel item is clickable, but you don't want it to be clickable while the user is dragging it or swiping it. | ||
| ``` | ||
| <Carousel beforeChanged={() => this.setState({ isMoving: true })} afterChanged={() => this.setState({ isMoving: false })}> | ||
| <a onClick={(e) => { | ||
| if(this.state.isMoving) { | ||
| e.preventDefault() | ||
| } | ||
| }} href='https://w3js.com'>Click me</a> | ||
| </Carousel> | ||
| ``` | ||
| - Preparing for the next slide. | ||
| ``` | ||
| <Carousel beforeChanged={(nextSlide) => this.setState({ nextSlide: nextSlide })}> | ||
| <div>Initial slide</div> | ||
| <div onClick={() => { | ||
| if(this.state.nextSlide === 1) { | ||
| doVerySpecialThing(); | ||
| } | ||
| }}>Second slide</div> | ||
| </Carousel> | ||
| ``` | ||
| ## General Props | ||
| ``` | ||
| responsive: responsiveType; | ||
| deviceType?: string; | ||
| forSSR?: boolean; | ||
| slidesToSlide: number; | ||
| disableDrag?: boolean; | ||
| removeArrow?: boolean; | ||
| disableSwipeOnMobile?: boolean; | ||
| removeArrowOnDeviceType?: string | Array<string>; | ||
| children: any; | ||
| customLeftArrow?: React.ReactElement<any> | null; | ||
| customRightArrow?: React.ReactElement<any> | null; | ||
| customDot?: React.ReactElement<any> | null; | ||
| infinite?: boolean; | ||
| minimumTouchDrag: number; // default 50px. The amount of distance to drag / swipe in order to move to the next slide. | ||
| contentClassName?: string; | ||
| itemClassName?: string; | ||
| containerClassName?: string; | ||
| keyBoardControl?: boolean; | ||
| autoPlay?: boolean; | ||
| autoPlaySpeed?: number; // default 3000ms | ||
| shouldShowDots?: boolean; | ||
| customTransition?: string; | ||
| transitionDuration?: number; | ||
| // if you are using customTransition, make sure to put the duration here. | ||
| // for example, customTransition="all .5" then put transitionDuration as 500. | ||
| // this is needed for the resizing to work. | ||
| responsive: responsiveType; | ||
| deviceType?: string; | ||
| forSSR?: boolean; | ||
| slidesToSlide: number; | ||
| disableDrag?: boolean; | ||
| removeArrow?: boolean; | ||
| disableSwipeOnMobile?: boolean; | ||
| removeArrowOnDeviceType?: string | Array<string>; | ||
| children: any; | ||
| customLeftArrow?: React.ReactElement<any> | null; | ||
| customRightArrow?: React.ReactElement<any> | null; | ||
| customDot?: React.ReactElement<any> | null; | ||
| infinite?: boolean; | ||
| minimumTouchDrag: number; // default 50px. The amount of distance to drag / swipe in order to move to the next slide. | ||
| afterChanged?: (previousSlide: number, state: any) => void; // Change callback after sliding everytime. `(previousSlide, currentState) => ...` | ||
| beforeChanged?: (nextSlide: number, state: any) => void; // Change callback before sliding everytime. `(previousSlide, currentState) => ...` | ||
| contentClassName?: string; | ||
| itemClassName?: string; | ||
| containerClassName?: string; | ||
| keyBoardControl?: boolean; | ||
| autoPlay?: boolean; | ||
| autoPlaySpeed?: number; // default 3000ms | ||
| shouldShowDots?: boolean; | ||
| customTransition?: string; | ||
| transitionDuration?: number; | ||
| // if you are using customTransition, make sure to put the duration here. | ||
| // for example, customTransition="all .5" then put transitionDuration as 500. | ||
| // this is needed for the resizing to work. | ||
| ``` | ||
@@ -198,8 +253,8 @@ | ||
| | Name | Type | Default | Description | | ||
| | :------------------- | :---------------- | :-------------------- | :----------------------------------------------------------------------- | | ||
| | `responsive` | `Object` | `{}` | How many items to show on each breakpoint. | | ||
| | `deviceType` | `string` | `none` | Only pass this when use for server-side rendering, what to pass can be found in the example folder. | | ||
| | `forSSR` | `bool` | `false` | For SSR | | ||
| | `slidesToSlide` | `number` | `1` | How many slides to slide. | | ||
| | Name | Type | Default | Description | | ||
| | :-------------- | :------- | :------ | :-------------------------------------------------------------------------------------------------- | | ||
| | `responsive` | `Object` | `{}` | How many items to show on each breakpoint. | | ||
| | `deviceType` | `string` | `none` | Only pass this when use for server-side rendering, what to pass can be found in the example folder. | | ||
| | `forSSR` | `bool` | `false` | For SSR | | ||
| | `slidesToSlide` | `number` | `1` | How many slides to slide. | | ||
@@ -206,0 +261,0 @@ ## Contribute |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by9.48%
85260
- Lines of code
- increased by11.79%
673
- Number of lines in readme file
- increased by27.23%
257
No dependency changes