Shopify

Question

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

Slick 确实有效 - 但响应式 setting/feature 无效。如果我使用 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
      }
    }
  ]
});

None 的响应功能有效。它只需要初始的 slidesToShow 值 2。如果你删除它，那么它默认回到 1 的光滑默认值。没有 window resizing/refreshing 有任何区别，我的 div 容器是我的 DOM/viewport 的全宽，因此它不会受到小容器中存在的影响，如果相关的话。

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

有人可以指教吗？提前致谢。

Answer 1

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

在 vendor.js 文件中注释掉 slick.min.js
已下载最新的 slick (v1.8.1) https://kenwheeler.github.io/slick/
在 Assets 中创建了一个名为 "slick.js" 的新文件，并将 slick.min.js 文件复制到我刚刚下载的
在我的 theme.liquid

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

然后响应功能起作用了。

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

Shopify - Slick Slider / Carousel - Responsive setting not working

javascript

jquery

slick.js