时间戳

首页 > 解决方案 > Shopify - Slick Slider / Carousel - 响应设置不起作用

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

问题描述

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

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。没有调整窗口大小/刷新有任何区别，我的 div 容器是我的 DOM/视口的全宽，所以它是如果相关的话，不受小容器中的存在的影响。

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

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

标签： javascriptjqueryshopifyslick.js

解决方案

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

  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>

然后响应功能起作用了。

推荐阅读