5

I set the following configuration for the react-slick:

infinite: true,
speed: 500,
slidesToShow: 6,
slidesToScroll: 5,
swipeToSlide: true,
autoplay: true,
arrows: false
dots: false

Everytime the slick item slides, the whole page hangs. For example, aside from this slick, I have a table below. When I try to scroll my table while the slick slides, it hangs, it waits for the slick to finish sliding before i can scroll my table. Same goes when opening a modal window. If the slick is sliding when I open a modal window, it hangs until slick finishes the slide before showing my modal window. How to fix this issue of hanging?

Seems like even just using slick itself causes the page to hang while the slide slides.

Dominic
  • 62,658
  • 20
  • 139
  • 163
iPhoneJavaDev
  • 821
  • 5
  • 33
  • 78

1 Answers1

3

I know this isn't ideal but react-slick seems to be unmaintained for a few months already (and it also has performance issues: https://github.com/akiran/react-slick/issues/1274, which haven't been addressed by the maintainer).

I would try to replace it with another carousel component and see if the performance improves. I picked this one as I have used it before and it seems to be maintained better than react-slick: https://github.com/express-labs/pure-react-carousel

This one is another library I have used before - https://github.com/leandrowd/react-responsive-carousel but it hasn't been updated in a few months so I cannot recommend it at the moment.

tudor.gergely
  • 4,800
  • 1
  • 16
  • 22
  • Actually even just directly using "slick" without all these react versions, you can see that the page hangs while it auto-slides. How is these other react versions any different when the underlying "slick" module itself is already causing the hang. – iPhoneJavaDev Mar 11 '20 at 05:41
  • I think the reason for hanging is when I implement the "onBeforeChange" where I update a state variable. Then one component depends on this state to determine what is the current slide. When I commented the implementation of onBeforeChange, no more hanging. But why react hangs everything when a state updates? – iPhoneJavaDev Mar 11 '20 at 05:54
  • Show me your code, could be a number of reasons but most likely you are triggering unwanted rerendeds. – tudor.gergely Mar 11 '20 at 07:04
  • @tudor.gergely pure-react-carousel don't have functions to handle next, back actions . we just have to use buttonback, buttonnext components – bhaRATh Sep 22 '21 at 07:06