Slick轮播组件rows与slidesPerRow响应式配置失效问题排查求助

我想要我的轮播组件满足以下响应式展示条件：

• 大屏桌面（992px及以上）：3 rows + 3 slidesPerRow
• 小屏桌面（小于992px）：2 rows + 2 slidesPerRow
• 移动端（小于768px）：1 row + 1 slidesPerRow

但实际测试下来，在小于992px的屏幕上，轮播始终保持大屏的配置，响应式的rows和slidesPerRow设置完全没生效，这可愁死我了😅

下面是我用到的完整代码，麻烦各位帮忙看看哪里出问题了：

JavaScript配置代码 #

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

HTML结构代码 #

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

备注：内容来源于stack exchange，提问作者clarkf