Control deslizante de imagen de JavaScript que permitirá agregar más diapositivas después de la carga de la página

Actualmente estoy construyendo una página de deslizador de imagen. El control deslizante carga 10 imágenes, y cuando el usuario se aproxima al final de estas 10, carga 10 más, hasta el infinito. Es decir:

if (currentSlideNumber = allSlides.length - 2) { get more slides } 

Las nuevas diapositivas se agregan dinámicamente como elementos DOM – tags img con srcs.

Obviamente, existen innumerables plugins js slider y opciones disponibles, pero por lo que yo sé, ninguno de ellos fue creado para manejar este tipo de uso. ¿Cómo se maneja esto típicamente?

EDITAR: Pude obtener una solución de trabajo a través de lightSlider . Mi función js agrega tags img dentro de las tags li, y luego llama a slider.refresh (), lo que obliga al control deslizante a volver a explorar el DOM y realizar las acciones necesarias en los nuevos elementos DOM para agregarlos al control deslizante.

DE ACUERDO. Pongámoslo de esta manera.

La biblioteca que quieres usar es Slick.js

¿Cómo vas a usar esto?

Aquí está tu HTML

 
...

Y creo que este guion hará el truco:

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