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

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 > 1) 更改为 if(.options.rows > 0)

这是一种解决当前存在 slick-carousel 的问题的方法。