Shopify - Slick Slider / Carousel - 响应设置不起作用

Question

我正在使用 Shopify（Debut 主题），它预装了一个 Slick 轮播版本。

Slick 确实有效 - 但是响应式设置/功能无效。 如果我使用 slick 给出的确切代码作为他们的演示之一作为一个简单的示例：

$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

没有任何响应功能起作用。 它只需要初始 slidesToShow 值 2。如果你删除它，那么它默认回到光滑的默认值 1。没有 window 调整大小/刷新有任何区别，我的 div 容器是我的 DOM/视口的整个宽度，所以它是如果相关的话，不受小容器中的存在的影响。

我看到这个问题在不同的论坛上被问了很多，但我找不到真正的解决方案。 我试图更新我的 Slick 版本，但没有成功 - 但这可能仍然是问题，我可能没有正确完成。

任何人都可以建议吗？ 提前致谢。

Answer 1

我通过执行以下操作自己修复了它：

1. 在 vendor.js 文件中注释掉 slick.min.js
2. 下载最新的 slick (v1.8.1) https://kenwheeler.github.io/slick/
3. 在 Assets 中创建了一个名为“slick.js”的新文件，并将我刚刚下载的 slick.min.js 文件复制到其中
4. 在我的 theme.liquid 中的 vendor.js（但在 theme.js 之上）脚本下方添加了以下内容

<script src="{{ 'slick.js' | asset_url }}" defer="defer"></script>

然后响应功能起作用了。