油滑的表演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 =函数（）{...}
• Slick.prototype.cleanUpRows =函数（）{...}

和改变从如果（.options.rows> 1），以如果（ .options.rows> 0）

模板if条件：

<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