react-slick causing the whole page to hang

Question

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.

Answer 1

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.