Slick show 2 行，桌面上的 6 个项目和 1 行，移动设备上的 1 个项目答案

【问题标题】：Slick show 2 row, 6 items on desktop and 1 row, 1 item on mobileSlick show 2 行，桌面上的 6 个项目和 1 行，移动设备上的 1 个项目
【发布时间】：2016-02-29 15:09:45
【问题描述】：

有人可以帮我弄清楚为什么我的代码不起作用吗？我正在尝试在全宽上完成 2 行和 6 个项目，在移动设备上完成 1 行和 1 个项目。

$('.your-class').slick({
        slidesToShow: 1,
  rows:2,
  slidesPerRow: 3,
    responsive: [{ 
        breakpoint: 500,
        settings: {
            arrows: true,
            infinite: false,
              rows:1,
  slidesPerRow: 1,
            slidesToShow: 1,    
        } 
    }]
});

<div class="your-class">
      <div class="">your content</div>
      <div class="">your content</div>
      <div class="">your content</div>
      <div class="">your content</div>
      <div class="">your content</div>
      <div class="">your content</div>
</div>

http://codepen.io/Kibs/pen/aNzvBG

谢谢

【问题讨论】：

将代码放在这里比放在其他位置更好

标签： jquery slick.js

【解决方案1】：

您必须更改 slick.js 中的一些代码，因此您必须使用未缩小的 js 版本来执行此操作。所以，在 slick.js 中找到这两个方法：

Slick.prototype.buildRows = function() { ... }
Slick.prototype.cleanUpRows = function() { ... }

并将 if 条件从 if(.options.rows > 1) 更改为 if(.options.rows > 0)

模板：

<div class="carousel">
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
    </div>

CSS：

.slick-slide{
  img{
    width: 100%;
  }
}

JS：

$('.carousel').slick({
    dots: true,
    slidesPerRow: 3,
    rows: 2,
    responsive: [
    {
      breakpoint: 478,
      settings: {
        slidesPerRow: 1,
        rows: 1,
      }
    }
  ]
});

这对我有用。

【讨论】：

谢谢你这个工作，但对我来说，缩小的 js 似乎不同，但仍然可以将 if 语句更改为 0

【解决方案2】：

此修改已合并https://github.com/kenwheeler/slick/commit/34612b42641e8fd4250f70666a8da67eb624d002

但是警告：它有一些麻烦https://github.com/kenwheeler/slick/issues/3110

【讨论】：

【解决方案3】：

它在缩小版中被破坏了。从 GitHub 下载 unminified 版本，它就可以工作了。

【讨论】：