JavaScript Image Slider That Will Allow More Slides To Be Added After Page Load

I am currently building an image slider page. The slider loads 10 images, and as the user approaches the end of these 10, it loads 10 more, ad infinitum. Ie like: if (currentSlideN

Solution 1:

OK. Let's put it this way.

Library you want to use is Slick.js

How are you going to use this ?

Here is your HTML

<div class="slider lazy">
    <div><div class="image"><img data-lazy="someImage.jpg"/></div></div>
    ...
</div>

And I think this script will do the trick:

$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});