nir9 / itemslide

JavaScript Touch Carousel Library with Zero Dependencies
https://itemslide.org
MIT License
647 stars 85 forks source link

Rewind slides and performance issue with too many items #80

Open arjunmenon opened 6 years ago

arjunmenon commented 6 years ago

Hey I am facing two issues

  1. After you reach the last slides, how can we get the carousel to rewind itself back to the first. This is not similar to #41, looping slides. But rather it stays like a slider, and when we further swipe after reaching the end, it will rewind, like scroll like a moving train back to the first slide.

  2. There are performance issues if the slide size is large. All elements are being rendered in the DOM, now what happens if there are 50 or 100 or more. It will be better to do DOM virtualization . That is, all items are created but instead of actually rendering the DOM for each of them, what is finally shown is based off browser size.

For eg, if carousel has 100 images and the browser can only display 3 images at a time based of its width, the rest of the pack would only be rendered when the user actually moves through the carousel, each, 3 at a time.

At no point does the browser has to handle more than 3, more than what it can show based-off of its size.

This is not lazy loading since, data is all loaded, only the DOM is rendered for those displayable 3 images, not for others, as and when user scrolls.

Building the DOM is where the issue is. It can be avoided this way.