Question

我使用的flexslider插件由以下代码触发：

 $(window).on('load', function () {
    $('.flexslider').flexslider();
  });

一旦页面加载就会运行。在应用程序的后期，我已经替换了flexslider的内容（其中的图像数量及其来源），需要重新加载flexslider。

我的代码如下：

document.getElementById('contestant1').onclick = function() {
    process();  
}   

output = "";
for (num=1; num<=3; num++) {
    imagesource = "Week" + num + "/Antony.png";
    output = output + "<li> <img src=" + imagesource + " /> </li>";
}
document.getElementById('images').innerHTML = output;
console.log(output);
$('.flexslider').flexslider();

请告诉我如何强制滑动滑块重新加载。以下是完整应用程序的链接，但它有一些与问题无关的更复杂的元素：

http://eg-graphics.com/zwooper/EGVGV/Season2/MemoryWall.html

Answer 1

找出一个修复：

添加了以下行： $('#flexslider').removeData("flexslider");

在此之前

：$('.flexslider').flexslider();

像梦一样运行

Answer 2

您可以恢复旧的flexslide并重新启动它。

output = "";

for (num=1; num<=3; num++) {
    imagesource = "Week" + num + "/Antony.png";
    output = output + "<li> <img src=" + imagesource + " /> </li>";
}

var images = $("#images").append(output);
console.log(output);
$(".flexslider").remove();
$(".Your-flexslider-container").append("<div class='flexslider'></div>");
$(".flexslider").html(images);
$('.flexslider').flexslider();

这是一个例子，因为我现在不知道你的html flexslider。试着让这段代码适合你。

重新加载Flexslider

2 个答案: