javascript - 使用 Ajax 添加新图像时动态更新 BxSlider

Question

我正在使用 BxSlider jQuery 在 slider 中显示多个图像。我将图像加载到无序列表中，它们显示在 slider 中。到目前为止一切都很好。

好的，这就是我要解决的问题。我有很多图片，我只想为初学者加载前 40 张。当 slider 到达最后一个时，我计划通过 Ajax 请求添加新的。

重新加载 slider 以拍摄新图像的选项是使用以下方法。

• > reloadSlider()
• destroySlider()

但它的作用是重新加载 slider 并从第一张图像重新开始，而我想要的是使用添加的图像继续滑动。

关于这个问题有什么建议/帮助吗？谢谢。

Answer 1

这对你来说可能为时已晚，但对其他人来说不是，bxSlider API 允许你获取当前幻灯片

yourSlider.getCurrentSlide()

这样您就可以将当前的幻灯片索引存储在某处，并在您重新加载 slider 时再次使用它

yourSlider.reloadSlider()

使用选项 startSlide

这将以这种方式进行:

var mySlider = $('.bxslider').bxSlider();

/* The part where you add your images */

var currentSlide = mySlider.getCurrentSlide();

mySlider.reloadSlider({
    startSlide: currentSlide,
    //whatever your options were
});