重新加载 Flexslider

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();

请告诉我如何强制重新加载 flexslider。这是完整应用程序的 link，但是它有一些与问题无关的更复杂的元素：

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

Answer 1

找到解决方法：

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

在此之前：$('.flexslider').flexslider();

如梦如幻

Answer 2

您可以删除旧的 flexslider 并重新初始化它。

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

Reload Flexslider

javascript

jquery

flexslider