Flickity 滑块在刷新之前不起作用

Question

我有 flickity slider 应该在页面加载时看起来不错。但是在页面加载时图像混搭。只有在我刷新页面一两次后，它才能正常工作。

您可以在此处找到具有意外行为的网站： DEMO

代码

<script type="text/javascript">
$('.main-gallery').flickity({
  wrapAround: true,
  freeScroll: true
});
$(window).load(function() {
$('.gallery').flickity().focus();
});
</script>

如有任何帮助，我们将不胜感激！提前致谢！

Answer 1

您忘记使用 $(document).ready()。阅读 here why you should use this.

具体来说，如果您想绝对确定图像已经加载，您可以使用：

$(window).load(function () {
    $('.main-gallery').flickity({
        wrapAround: true,
        freeScroll: true,
        lazyLoad: 3
    });
});

这是因为 $(window).load() 只会在 DOM 和所有图像都加载时执行。

此外，您可以使用 lazyLoad 选项来确保加载相邻单元格中的图像。为了使其正常工作，请确保滑块中的图像多于页面宽度。有了它，一切都应该正常工作。

Flickity 滑块在刷新之前不起作用

Flickity slider doesn't work until refresh

jquery

flickity

代码

DEMO