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

【问题标题】：JavaScript image slider that will allow more slides to be added after page loadJavaScript 图像滑块，允许在页面加载后添加更多幻灯片
【发布时间】：2015-06-21 20:52:40
【问题描述】：

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

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

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

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

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

【问题讨论】：

您可能已经看过this post，但只是为了安全起见。 =]
@Alp 是的，我已经看到了。延迟加载并不是我想要的，因为我正在处理 XMLHttpRequests 以在我自己的函数中获取 url。此外，该线程已有 4 年历史，并且许多插件已被弃用/不再受支持。你知道当代的同类吗？
我假设你也已经知道Slick。但是再提一次也没坏处。
@Alp 是的，我知道光滑。文档没有提到动态添加幻灯片。
其实有延迟加载。查看source code 第 1303 行。我认为它与您正在寻找的东西很接近。

标签： javascript jquery html dynamic

【解决方案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
});

【讨论】：

谢谢，但经过进一步调查，这并没有帮助。所有这一切都是推迟实际加载，它不会检测新添加的 DOM 元素。我希望能够动态添加 DOM 元素并让滑块识别这些新添加的元素。
我找到了一个可行的解决方案，请检查我的问题以进行最终编辑来解释这一点。
太棒了！感谢您给我留言 =]