Shopify-光滑滑块/轮播-响应设置不起作用

Question

我正在使用Shopify（首次登台主题），它预装了一个版本的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。没有窗口大小调整/刷新会有所不同，并且div容器是DOM /视口的全宽，因此如果合适的话，不会受到放在小容器中的影响。

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

有人可以建议吗？预先感谢。

Answer 1

我通过以下操作自行修复：

1. 在vendor.js文件中注释了slick.min.js
2. 下载了最新版本（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>

然后响应功能起作用了。