react-responsive-carousel infiniteLoop is broken since 3.2.22

infiniteLoop is broken since 3.2.22

Open shwao opened this issue 2 years ago • 16 comments

Describe the bug The infiniteLoop option does not work anymore with version 3.2.22. The carousel does not go in a loop but jumps from the end to the start or from start to end.

To Reproduce Install version 3.2.22 and create a carousel with at least 2 slides. Go to the last slide and then one more. It should go the first slide in a loop but instead it jumps back to the first slide.

Expected behavior It should go in a loop.

Additional context The infiniteLoop option works as expected with 3.2.21. Installing this exact version "fixes" it. The weird thing is that if you install the newest version and then comment out the only change made to the code (https://github.com/leandrowd/react-responsive-carousel/commit/8cc7480c055d5824a23708a003be0941a364e8a2) it does not fix the problem. So this change does not seem to cause the bug. Maybe the build process changed and the bug was introduced there?

Video from the storybook You can see the bug in the storybook demo. As you can see the infiniteLoop option is enabled but it just jumps back. I would like to show the difference to the previous version but i don't know if thats possible in storybooks.

https://user-images.githubusercontent.com/63549997/153608318-760ca202-b8f4-4c6c-9958-7ba9414a456e.mov

I would help I would like to contribute but i don't know what else could be the problem to this instead of the only change made to the code and I don't know about your build process. Maybe you find the problem or can give me more info where to look.

Feb 11 '22 14:02 shwao

Hi, is this issue resolved? if not i would like to work on this.

Feb 20 '22 17:02 SachinCoder1

Hi, is this issue resolved? if not i would like to work on this.

The issue is not resolved.

Mar 24 '22 04:03 krunal81093

Thanks for sharing this issue! For now, I'll revert to 3.2.21 👍

Apr 15 '22 11:04 michael-harley

It works now! but somehow it breaks the styling of the container, i have a popup with the carousel component set to 60vw and when i apply infiniteLoop the component stretches to like 90vw and the content of the carousel gets shifted to the left while overflowing from the slide container.

Sep 16 '22 18:09 Longshoez

It works now! but somehow it breaks the styling of the container, i have a popup with the carousel component set to 60vw and when i apply infiniteLoop the component stretches to like 90vw and the content of the carousel gets shifted to the left while overflowing from the slide container.

Yep same here. Would be neat if a fix could be implemented

Nov 15 '22 15:11 thomcrielaard

same issue i am facing reverted back to version 3.2.21 and now its working fine

Dec 15 '22 16:12 utkarsh621x

same issue i am facing reverted back to version 3.2.21 and now its working fine

Good suggestion, I'll try that soon!!

Dec 15 '22 16:12 thomcrielaard

I would help I would like to contribute but i don't know what else could be the problem to this instead of the only change made to the code and I don't know about your build process. Maybe you find the problem or can give me more info where to look.

I discovered the following: version 3.2.21 (npm install [email protected] vs npm install [email protected]) has no file react-responsive-carousel\lib\js\components\Carousel.js , if you copy the file from version 3.2.21 to 3.2.22, the infinite loop starts working correctly.

Mar 16 '23 09:03 buhbuhtig

New update investigation. Found out (I may be wrong in details, but the general picture is clear) that there was split refactoring (Carousel.tsx -> index.tsx,animation.ts,...) after 3.2.15, where infiniteloop already stopped working. But. No one noticed this, because the new files were "covered" by the old ( repo: https://www.npmjs.com/package/react-responsive-carousel?activeTab=versions ), not deleted, obsolete working code (the original Carousel.js, Carousel.tsx files were not deleted). In installation 3.2.22, the Carousel.js file was removed because in theory it was not needed, and we started using new but glitchy (infiniteloop does not work) code.

Mar 20 '23 11:03 buhbuhtig

"react-responsive-carousel": "^3.2.10" this version works properly with infinite loop