leaffm / react-infinite-carousel

React simple infinite carousel with lazy loading and responsive support
MIT License
116 stars 19 forks source link

Resize problem #40

Closed AndrewOskolok closed 2 years ago

AndrewOskolok commented 3 years ago

Hi, i am Andrew. I liked your carousel. But I noticed one problem. If autoCycle is true, then when you change the resolution (for example, turn the phone), setTimeout is set again and there are two cycles. The more the resolution changes, the faster it starts to switch. I would like you to fix this problem so that I can fully use your library. Thanks!

nullwriter commented 3 years ago

I have this issue too. But it also happens on mobile: If you scroll down/up on mobile, it starts going faster, I believe it's the same issue.

nullwriter commented 3 years ago

@Oscolok one quick solution I did was set an id for the next arrow and do a setInterval:

setInterval(function(){
     document.getElementById('next-btn').click();
}, cycleInterval)

And of course set autoCycle to false :)

AndrewOskolok commented 3 years ago

@nullwriter thank you for this method. I was thinking about something similar.

Jangam commented 3 years ago

@Oscolok one quick solution I did was set an id for the next arrow and do a setInterval:

setInterval(function(){
     document.getElementById('next-btn').click();
}, cycleInterval)

And of course set autoCycle to false :)

This worked for me. but I am using default setup so i dont have id in my carousel setup. so i used name instead

  setInterval(function () {
    document.getElementsByName("infinite-carousel-button-next")[0].click()
  }, 2000);  // 2 second interval
gl0gl0 commented 2 years ago

This issue has been resolved in version 3.0.0. Sorry for the long wait.