如何在响应式显示上使用光滑的轮播行和slidesPerRow？

Question

我想要我的轮播项目在 ff 条件下：

1. 3 rows and 3 slidesPerRow

   在上面的大桌面上。

2. 2 rows and 2 slidesPerRow

   小于 992 像素。

3. 1 rows and 1 slidesPerRow

   小于 768 像素。

但是似乎

rows and slidesPerRow

在下面的小桌面上不起作用？。它总是显示大桌面

settings

？

您可以检查/运行以下代码：

$(function() {
  $('.slick-slider-multiple').slick({
      rows: 3,
      slidesPerRow: 3,
      responsive: [
      {
        breakpoint: 992,
        settings: {
          rows: 2,
          slidesPerRow: 2,
        }
      },
      {
        breakpoint: 768,
        settings: {
          rows: 1,
          slidesPerRow: 1,
        }
      }
    ]
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<div class="slick-slider-multiple">
        <div class="slick-single-slide">
            <h1>Slick Slide 1</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 2</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 3</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 4</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 5</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 6</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 7</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 8</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 9</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 10</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 11</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 12</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 13</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 14</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 15</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 16</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 17</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 18</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 19</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 20</h1>
        </div>
    </div>

Answer 1

它使用

slick.js

而不是

slick.min.js

来工作。我不知道为什么，但我认为

slick.min.js

版本 1.8.1 上有一个损坏的代码。

我将保持这个问题的开放性。因为我希望我的问题能够在调整大小时使用

javascript

、

jquery

或使用我们的

slick.min.js

进行修复的任何其他方法得到解答。

检查下面更新的

code

：

$(function() {
  $('.slick-slider-multiple').slick({
      rows: 3,
      slidesPerRow: 3,
      responsive: [
      {
        breakpoint: 992,
        settings: {
          rows: 2,
          slidesPerRow: 2,
        }
      },
      {
        breakpoint: 768,
        settings: {
          rows: 1,
          slidesPerRow: 1,
        }
      }
    ]
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>

<div class="slick-slider-multiple">
        <div class="slick-single-slide">
            <h1>Slick Slide 1</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 2</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 3</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 4</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 5</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 6</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 7</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 8</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 9</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 10</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 11</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 12</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 13</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 14</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 15</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 16</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 17</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 18</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 19</h1>
        </div>
        <div class="slick-single-slide">
            <h1>Slick Slide 20</h1>
        </div>
    </div>