左右两排光滑的旋转木马 [英] Slick carousel in two rows left to right

问题描述

我需要制作一个从左到右顺序排列的两行轮播(也可以响应)

I need to make a two lines carousel with left to right order (also responsive)

使用:

$('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张幻灯片以响应模式显示:

This solution is not good for me because I'm using 1 slides to show in responsive mode: How can I create a carousel with multiple rows?

有什么想法吗?

推荐答案

您需要类似的内容 模板:

You need something like that Template:

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

对我有用的

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

And if you want to show on mobile only one row, you should do that,

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

You have to change some code in slick.js so you have to use the not minified js version to do that. So, find these two methods in slick.js:

• Slick.prototype.buildRows = function(){...}
• Slick.prototype.cleanUpRows = function(){...}

并将if条件从if( .options.rows> 1)更改为if( .options.rows> 0)

and change the if condition from if(.options.rows > 1) to if(.options.rows > 0)

这是解决当前具有圆滑传送带的问题的一种方法.

It is a way to fix a problem that currently has slick-carousel.

这篇关于左右两排光滑的旋转木马的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！