Flickity 并不总是加载 (Shopify)

Question

我正在使用 flickity 在我的 Shopify 商店中制作轮播。当它有时不加载时会发生一件奇怪的事情。它有时会发生，但并非总是如此。我在控制台中找不到任何东西来帮助理解为什么会这样。刷新页面通常会给出正确的结果

我已经尝试过的事情：

仅使用 2 个 Flickity 组件中的 1 个，仍然不起作用
在 Shopify 的服务器上托管 css 和 js 文件与 unpkg.com（通常托管的地方）

网站：https://4s6snnbh0sbvzjnb-5771952162.shopifypreview.com

有时会发生什么：

预期结果（刷新后发生）：

Answer 1

在某些情况下，由于某些 JS 冲突或图片加载缓慢等内容加载问题，滑块无法正常工作。有一个小技巧可以触发 Flickity 滑块工作。

// trigger a resize event once the window is loaded, it refresh the Flickity slider on resize
window.onload = function(){
    window.dispatchEvent(new Event('resize'));
}

当 window 调整滑块大小时重新计算它并滑动以显示等，因此如果存在导致滑块随机失败的问题。

然后我们生成一个javascript代码resize事件，滑块完美运行。

Flickity 并不总是加载 (Shopify)

Flickity doesn't always load (Shopify)

javascript

shopify

flickity