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

2023年1月31日 165次阅读

我有
flickity slider,当页面加载时应该看起来不错.但是当页面加载时图像混搭.只有在我刷新页面一两次后才能顺利工作.

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

码

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

任何帮助将不胜感激！提前致谢！

最佳答案 你忘了使用$(document).ready().阅读
here why you should use this.

具体来说,如果您想要确保已加载图像,可以使用：

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

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

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

DEMO

点赞