Infinite scroll renders large amounts of slides in the DOM

[jaworek]

Describe the bug
When using infinite scroll in the carousel it renders large amount of unnecessary DOM elements.

To Reproduce
https://codesandbox.io/s/x3k64q47qq

Expected behavior
DOM elements should be removed when they are not needed.

Additional context
I'm currently using react-slick to render infinite carousel that contains slides that display information and buttons that allow interaction with the application. If I switch to this library, rendering these components many times could have bad implications on the performance.

One of the solutions that I was thinking about was to use react-virtualized or react-window to efficently render slides, but I could not find a way to achieve infinite scroll with them.

[jaworek]

https://medium.com/@incubation.ff/build-your-own-css-carousel-in-react-part-one-86f71f6670ca

This seems like a good way to improve it without adding new library. Using flex order property elements can be reordered without need to modify DOM.

[sinujohn91]

I love this carousel. It has exactly the features that i want. Sadly i wont be able to use this because of this issue. Is this a priority for you guys?

[mdrazyk]

Hey, I'm sorry it's taken me so long to write back but we were a little busy. We will look at this issue and take care of it ASAP. Stay tuned 🙂

[ievgenklymenko]

Yeah, well. Your carousel has exactly futures I wanted. But it generates infinite copies of slides in infinite mode. Honestly this is the first time I see this in carousels and its quite fun 🤣

[Lukasz-pluszczewski]

@jaworek Flex order looks promising. We'll look into it.

Fix has been released with version 1.10.12. @jaworek would you be willing to verify it?

[jaworek]

https://codesandbox.io/s/x3k64q47qq

@szulcd2

It behaves much better than before. Now when I scroll I get 28-32 DOM nodes for 4 slides. When I tested it with 5 slides then I had 35-40 of them.

I would say that the issue was partially fixed, but may still be a problem for higher number of slides.

[jaworek]

After more testing it seems that I am able to generate more DOM nodes when I click fast to change slides. So far the highest number I was able to get with 5 slides was 60 elements. Also, fast interaction causes freeze of the website.

[PiotrSzlagura]

Shouldn't this issue be open once again? I tested it now in my case, for 5 slider it renders 35 DOM elements. I'm using latest version (1.13.37).

Now when I scroll I get 28-32 DOM nodes for 4 slides

It seems that it renders N * 7 DOM elements, where N is slides count, why?

For more slides, or more sliders on single page, DOM elements count can easily skyrocket because of this.

[PiotrSzlagura]

Also, when I scroll through slider very quicky, every N steps there is another N elements added. Shouldn't there also be N elements removed?

N is slides count