Slider suddenly jumps when in infinite loop reaches end

[Anam0927]

Prerequisite

My client asked for a very specific kind of carousel and after trying multiple ones, this is the best one I've found so far! Awesome job!

Describe the bug Slider suddenly jumps when in infinite loop reaches end. If coming from last to first, it jumps to first after a slight delay, and when coming from last to first, there's a longer delay and it jumps to some random slide near the last slide...

To Reproduce Steps to reproduce the behavior:

1. Make a carousel with fifteen images (that's the amount I'm using)
2. Add infinite mode to it
3. Add autoplay (or even without it) to see the bug

Expected behavior A smooth transition between first and last slide.

Additional context It was actually working nicely but I'm not sure what I changed which is now causing this issue

[RMrobb1e]

I think you changes the width on the itemClass. been experiencing this issue since I changed it.

[allindeveloper]

Hello I am also experiencing a similar issue I set the width of each item, but as i scroll, the slider just Jumps to a different item The issue only exists when infinite is true Please Any fix to it? @YIZHUANG

[MaquinaTech]

I think the error comes from the autoplay, it would be solved if you set the autoplay value to 1 when the slide restarts to make it more fluid, if you have the autoplay value at 1500, when the slide returns to the first image, it will take 1.5 sec to move again. Please, it is easy for the creator @YIZHUANG to solve and it would give quality to the slide

[ClaudioPuggioni]

Tested with

  autoPlay={false}
  autoPlaySpeed={0}

the issue still persists. The issue occurs for me when I have gaps/margins between items with infinite scroll enabled. It skips when I scroll left past the first div, and again when passing the last div whilst scrolling right.

Workaround is to include extra empty divs of fixed width between your actual divs.

[mohamedtsx]

customTransition="all 1000ms" 
transitionDuration={1000}

Make sure that both values are the same.

[SvetlioSS]

I've spent a few hours trying to find a workaround and came up with below configuration. In my case any value below 15 is causing the issue, including 0 and undefined. I think the storybook example "Auto play in infinite mode" works because autoPlaySpeed is set to 1000.

Note: this workaround is not great as the animation is not as smooth as it should be but I was fine with that in my use case where I show small logos. Maybe if you use big images it won't work.

autoPlaySpeed={15}
customTransition="all 1500ms linear"
transitionDuration={1500}