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

Jumps to first item when data changes #278

Closed bipinstha7 closed 2 years ago

bipinstha7 commented 2 years ago

Hi, I'm using infinite true with initially 10 items. When the user clicks next button (the previous button is disabled/hidden), API is called to get more data. When data is available from API and updated to state, the scroller jumps to the first item. Do we have any workaround to keep the item as it is when the state changes? When the next button is clicked and item scrolls to 6th/7th items but as soon as API resolves scroller jumps to first item. Any suggestions are highly appreciated. Thank you. and thank you for the awesome contribution.

abhinavdalal commented 2 years ago

you can call the next() callback on Api success.. https://github.com/YIZHUANG/react-multi-carousel#using-ref

bipinstha7 commented 2 years ago

Hi @abhinavdalal, I found out that the issue wasn't with the API response. The issue is with the infinite: true. Initially infinite is false and when there is no more data to fetch infinite becomes true. When infinite becomes true, items jump around, most of the time around the last items. Do I need to use the callback you have mentioned above or there is anything we can do with infinite: true? Thank you :)

abhinavdalal commented 2 years ago

@bipinstha7 i think you will need to maintain current slide state outside and then in api success you just need to call goToSlide. this may have some jarring though..

afaik if no of slides < visible slides then we force infinite false; so consider having enough items initially (can be fake items or skeleton items if you like).. this will ensure it has infinite:true initially itself.. this is the only way that we can avoid the jarring i can think off.