Fix slide direction for two items #194
Conversation
|
Hi @Learus , would you mind taking a look at this fix? I'm running into the same issue above and appreciate if this issue can be resolved :) |
|
Would also greatly appreciate this fix being merged in! |
|
Bump @Learus ! 🙏 |
|
I am seeing the same issue, will appreciate it if this fix is merged and released! |
|
So when will this fix be released? Having the same issue...🥲 Thank you in advance! @Learus |
|
Having the same issues, would love to see release of the proposed fix. In te mean time, how can I yarn add the repository including the fix? |
|
I hosted my fork here for my own Should work for anyone I believe |
|
@Learus I am facing the same problem... |
|
Any plans for merge? |
|
I'm facing this problem currently, merging this would save me a lot of time in designing a workaround |
| @@ -111,7 +111,7 @@ export const CarouselItem = ({ animation, next, prev, swipe, state, index, maxIn | |||
| let animate = 'center'; | |||
| if (index === active) | |||
| animate = 'center'; | |||
| else if (index === prevActive) | |||
| else if (maxIndex>1 && index === prevActive) | |||
There was a problem hiding this comment.
This solution created a jitter effect where the current card would disappear and then would be replaced by the next card with a slide effect.. i have fixed that...
| else if (maxIndex>1 && index === prevActive) | |
| else if (index === prevActive) |
| if (maxIndex > 1) { | ||
| if (active === maxIndex && index === 0) animate = 'rightOut'; | ||
| if (active === 0 && index === maxIndex) animate = 'leftOut'; | ||
| } |
There was a problem hiding this comment.
| if (maxIndex > 1) { | |
| if (active === maxIndex && index === 0) animate = 'rightOut'; | |
| if (active === 0 && index === maxIndex) animate = 'leftOut'; | |
| } | |
| if (maxIndex === 1) { | |
| if (active === maxIndex && index === 0) animate = 'leftOut'; | |
| if (active === 0 && index === maxIndex) animate = 'rightOut'; | |
| } else { | |
| if (active === maxIndex && index === 0) animate = 'rightOut'; | |
| if (active === 0 && index === maxIndex) animate = 'leftOut'; | |
| } |
| @@ -111,7 +111,7 @@ export const CarouselItem = ({ animation, next, prev, swipe, state, index, maxIn | |||
| let animate = 'center'; | |||
| if (index === active) | |||
| animate = 'center'; | |||
| else if (index === prevActive) | |||
| else if (maxIndex>1 && index === prevActive) | |||
| { | |||
| animate = isNext ? 'leftwardExit' : 'rightwardExit'; | |||
| if (active === maxIndex && index === 0) animate = 'rightwardExit'; | |||
There was a problem hiding this comment.
replace the code in line 117, 118 with the following
| if (active === maxIndex && index === 0) animate = 'rightwardExit'; | |
| if (maxIndex === 1) { | |
| if (active === maxIndex && index === 0) animate = 'leftwardExit'; | |
| if (active === 0 && index === maxIndex) animate = 'rightwardExit'; | |
| } else { | |
| if (active === maxIndex && index === 0) animate = 'rightwardExit'; | |
| if (active === 0 && index === maxIndex) animate = 'leftwardExit'; | |
| } |
|
this is solved already? @bishwo-pratap it's looks like you already have the solution in your hand, please fix whats necessary and get it in. pretty please.. |
Here is the fixed version npm i react-material-ui-carousel-dromanov-fixed-version |
Should close #192