javascript - Slick 没有响应式地适应

Question

我有一个div房子有 5 个孩子divs。

• 在断点1199px及以下，我不想slick slider启动。
• 在 和 之间的断点上1200px，1599px我想slick slider展示 2 张幻灯片。
• 在1600p1919px 和 1919px之间的断点, I want 上显示 3 张幻灯片。
• 在断点1920px及以上，我不想slick slider启动（所以它显示所有 5 张卡片）。

但是，在上下调整窗口大小时，滑块不会显示为该断点定义的幻灯片。

方法：

$(function() {

  const table_slider = $("#table");

  const settings = {
    arrows: false,
    dots: false,
    infinite: false,
    mobileFirst: true,
    initialSlide: 1,
    slidesToShow: 2,
    slidesToScroll: 1,
    responsive: [{
        breakpoint: 1599,
        settings: {
          slidesToShow: 3,
        }
      },
      {
        breakpoint: 1919,
        settings: 'unslick'
      }
    ]
  };

  $(pricing_table_slider).slick(settings);

  if ($(window).width() < 1200) {
    $(pricing_table_slider).slick('unslick');
  }

  $(window).on('resize orientationchange', function() {
    $(pricing_table_slider).slick('resize');
  });

  $(window).on('resize orientationchange', function() {
    if ($(window).width() > 1199 && $(window).width() < 1919) {
      $(pricing_table_slider).slick('resize');
    } else{
      $(pricing_table_slider).slick('unslick');
    }
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>


<div id="table">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
</div>

编辑：

已编辑片段，使用上面的 JS，当调整窗口大小超过 1200px 时，slick 不会初始化。

标签： javascripthtmljqueryslick.js