search

YIZHUANG / react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.
MIT License
1.25k stars 286 forks source link

Infinite mode renders wrong index items #309

Closed bipinstha7 closed 2 years ago

bipinstha7 commented 2 years ago

Hi, First thank you for this awesome package and the contribution.

As this packages clones the original item when infinite: true, the original index values changes. Original index of 0 might changes to 3/4/5 or some other values. We can get the original index using getOriginalCounterPart but my case is different here. We are rendering items based on the ordering (same as index). When it passes through clones the item orders mismatches but we need the exact order as before.

Can you please help me to retain the original order of the items in infinite mode? Everything works good on finite mode but breaks on infinite mode.

abhinavdalal commented 2 years ago

clones should not change order.. clones uses the same array as original and only appends and prepends to it.. because infinite mode is rotational it may seem its starting from some mid-point in the array.. but order should be maintained..

if you have a code sandbox created where you can replicate then maybe it will be possible to investigate what is going on in your case.. i doubt clones would be the issue though..

bipinstha7 commented 2 years ago

clones should not change order.. clones uses the same array as original and only appends and prepends to it.. because infinite mode is rotational it may seem its starting from some mid-point in the array.. but order should be maintained

Thank you for the response and yes as you have mentioned, the array has the same order as the original one but starting from some mid-point in the array. How do I start the infinite mode array from the start? I need to start from the order 1. Can you please help me to get it from start? Also as the size of the window changes, same as the starting point in the array.

abhinavdalal commented 2 years ago

https://github.com/YIZHUANG/react-multi-carousel#using-ref call goToSlide() in the useEffect of parent component..

please close this issue.. thanks..

irahulranjan commented 2 years ago

@bipinstha7 can you share how you resolved this. If I try the goToSlide it starts behaving like autoplay.

bipinstha7 commented 2 years ago

@bipinstha7 can you share how you resolved this. If I try the goToSlide it starts behaving like autoplay.

Hi @irahulranjan , goToSlide didn't work for me as well. I haven't resolved this issue yet, just rendering items without proper ordering. I am planning to revert back to infinite: false mode but it also has the UI problem.

ducndt commented 1 year ago

Hi @bipinstha7 , does your problem resolve, i'm now struggling with same problem

bipinstha7 commented 1 year ago

Hi @bipinstha7 , does your problem resolve, i'm now struggling with same problem

Hello @ducndt, I couldn't resolve the issue so I moved back to the infinite: false mode with the prev and next button/icon.

ducndt commented 1 year ago

thanks you, have a good day