JavaScript图像滑块，允许在页面加载后添加更多幻灯片

Question

我目前正在构建图片滑块页面。滑块加载10张图像，当用户接近这10张图像的末尾时，它会无限加载10张图像。就像：

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

新幻灯片作为DOM元素动态添加 - 带有srcs的img标签。

显然有无数js滑块插件和选项可供使用，但据我所知，它们都不是为了处理这种用法而构建的。这通常是如何处理的？

修改 我能够通过lightSlider获得有效的解决方案。我的js函数在li标签内添加img标签，然后调用slider.refresh（），这会强制滑块重新扫描DOM并对新DOM元素执行必要的操作以将它们添加到滑块。

Answer 1

行。让我们这样说吧。

您要使用的资料库是Slick.js

你打算如何使用它？

这是您的HTML

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

我认为这个脚本可以解决问题：

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