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 (currentSlideNumber = allSlides.length - 2) { get more slides }

The new slides are added dynamically as DOM elements - img tags with srcs.

Obviously there are literally countless js slider plugins and options available, but as far as I can tell, none of them were built to handle this kind of usage. How is this typically handled?

EDIT: I was able to get a working solution via lightSlider. My js function adds img tags inside of li tags, and then calls slider.refresh(), which forces the slider to rescan the DOM and perform the necessary actions on the new DOM elements to add them to the slider.

回答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
});

来源：https://stackoverflow.com/questions/30963316/javascript-image-slider-that-will-allow-more-slides-to-be-added-after-page-load