Slick 在桌面上显示 2 行，6 个项目，在移动设备上显示 1 行，1 个项目

Question

有人能帮我弄清楚为什么我的代码不起作用吗？我正在尝试在全宽上完成 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

谢谢

Answer 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,
      }
    }
  ]
});

这对我行得通。