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

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 问题的方法。