Scroll slider for a large number of images?

Question

JavaScript

Greetings.
There is a task to make a slider with a scroll bar for 1000+ images (photo of the tomography of the subject).
I found a seemingly suitable solution on a toaster ( jsfiddle.net/Deonis/rq6bv53r/), but the problem is braking when scrolling in chrome. I had to reduce the amount by 3 times. Maybe there is a better solution to this problem?

Answer 1

Ajax load as you scroll, while deleting the old ones.
take a slider with api like kenwheeler.github.io/slick
there are methods slickAdd and slickRemove
Let's load 15 photos at once, when scrolling every 5 (we cling to the afterChange event and check the index of the element) send ajax get another 5 iterate over add and remove the first 5. In total, there will be no more than 15 photos in the dom, and it will not slow down.
Of course, he has Lazy Loading, you can try, but the principle is different there, it's just that the photos themselves are not immediately loaded. And it turns out the number of elements in the house will be 1000+, which can still slow down. But it's worth checking if you don't want to bother with ajax.