光滑的旋转木马从左到右分为两排

Question

我需要制作一个从左到右顺序的两行旋转木马（也是响应）

使用：

$('slider').slick({
 rows: 2,
 slidesToShow: 3,
 responsive: [
     {
     breakpoint: 768,
     settings: {
        slidesToShow: 1           
     }
    }
  ]            
}); 

我收到了这个订单：

1  3  5  7  9  11
2  4  6  8  10 12

此解决方案对我不利，因为我使用1张幻灯片以响应模式显示：How can I create a carousel with multiple rows?

有什么想法吗？

Answer 1

你需要这样的东西 模板：

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

对我有用。

如果你想在移动设备上只显示一行，你应该这样做，

你必须在slick.js中更改一些代码，这样你就必须使用未缩小的js版本来做到这一点。所以，在slick.js中找到这两个方法：

• Slick.prototype.buildRows = function（）{...}
• Slick.prototype.cleanUpRows = function（）{...}

并将if条件从if（ .options.rows＆gt; 1）更改为if（ .options.rows＆gt; 0）

这是一种修复目前有光滑旋转木马的问题的方法。