演示

Question

刷新前 Flickity 滑块不起作用

2015-08-17

6563

jquery flickity

我有 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() 。请阅读此处了解您应该使用此功能的原因。

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

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

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

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