javascript - 通过ajax调用更新页面后重新启动flickity

Question

我正在尝试使用 metafizzy 的 flickity。效果很好，但在更新页面后，新加载的图库将无法运行。 ajax加载后如何重新初始化flickity？ 我使用 js-flickity 类来初始化脚本。

<div class="gallery js-flickity">
...
</div>

Answer 1

我知道有点晚了，但我还是会发布它，因为它可能会对其他人有所帮助。

还没有尝试过上面提交的调整大小的解决方案，但我是这样做的。

将元素附加到容器后，查找 js-flickity 元素，查看是否可以使用 data 方法获取对象数据，以及它是否未定义在该元素上初始化 flickity。

var nodeList = document.querySelectorAll('.js-flickity');

for (var i = 0, t = nodeList.length; i < t; i++) {
    var flkty = Flickity.data(nodeList[i]);
    if (!flkty) {
        new Flickity(nodeList[i]);
    }
}

更新:

注意到仍然很少有人在看这个问题。所以这是一个更新的解决方案，它还支持在数据属性(可选)中定义的 flickity 轮播选项。

var nodeList = document.querySelectorAll('.js-flickity');

for (var i = 0, t = nodeList.length; i < t; i++) {
    var flkty = Flickity.data(nodeList[i]);
    if (!flkty) {
        // Check if element had flickity options specified in data attribute.
        var flktyData = nodeList[i].getAttribute('data-flickity');
        if (flktyData) {
            var flktyOptions = JSON.parse(flktyData);
            new Flickity(nodeList[i], flktyOptions);
        } else {
            new Flickity(nodeList[i]);
        }
    }
}