Javascript 从左到右分为两排的光滑转盘

我需要做一个从左到右顺序的两行转盘（也是响应式的）

与：

我得到这个订单：

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

此解决方案不适合我，因为我使用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>

JS:

这对我很有用

如果你想在手机上只显示一行，你应该这样做

您必须更改slick.js中的一些代码，因此您必须使用未缩小的js版本来执行此操作。因此，请在slick.js中找到这两种方法：

• Slick.prototype.buildRows=函数（）{…}
• Slick.prototype.cleanupws=function（）{…}

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

---

这是一种解决当前旋转木马问题的方法。

每个滚动条是每行移动1张幻灯片，还是每行移动3张幻灯片？您的响应规格是什么，这意味着您希望它如何在不同的视图宽度中显示？destktop模式：slidesToShow:3，slidesToScroll:3；移动模式：slidesToShow:1，slidesToScroll:1您能在slick.js中发布更改吗？我正在与之斗争。响应选项不允许指定行。github上目前有一个功能请求。它根本不起作用，甚至无法做出任何更改slider@Samia如果您使用的是版本1.8.1中的精简代码，则可以通过使用未精简版本来解决此问题。此问题已在1.9.0版中修复。当然，您可以使用1.9.0版的精简代码Hanks@Yoan，它对我很有用。但是自动播放不起作用。我已设置了

autoplay:true

，但仍不起作用：(

<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>

.slick-slide{
  img{
    width: 100%;
  }
}

$('.carousel').slick({
    dots: true,
    slidesPerRow: 3,
    rows: 2,
    responsive: [
    {
      breakpoint: 478,
      settings: {
        slidesPerRow: 1,
        rows: 1,
      }
    }
  ]
});