Question

有人可以帮我弄清楚为什么我的代码不起作用吗？我试图在整个宽度上完成2行和6个项目，在移动设备上尝试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＆gt; 1）更改为if（ .options.rows＆gt; 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,
      }
    }
  ]
});

对我有用。

Answer 2

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

但警告：它有一些问题https://github.com/kenwheeler/slick/issues/3110

Answer 3

它在缩小版本中被破坏了。从 GitHub 下载未压缩的版本，它会工作。

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

3 个答案: