使用Slick在不同断点显示不同数量的幻灯片

@media screen and (max-width: 480px) {
  // 在小屏幕设备上显示1个幻灯片
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  // 在中等屏幕设备上显示2个幻灯片
}

@media screen and (min-width: 769px) {
  // 在大屏幕设备上显示3个幻灯片
}

<div class="slider">
  <div>幻灯片1</div>
  <div>幻灯片2</div>
  <div>幻灯片3</div>
  <div>幻灯片4</div>
  <!-- 根据不同断点显示不同数量的幻灯片 -->
</div>

<script>
  $(document).ready(function() {
    $('.slider').slick({
      slidesToShow: 1, // 在小屏幕设备上显示1个幻灯片
      responsive: [
        {
          breakpoint: 481, // 中等屏幕设备的断点
          settings: {
            slidesToShow: 2 // 在中等屏幕设备上显示2个幻灯片
          }
        },
        {
          breakpoint: 769, // 大屏幕设备的断点
          settings: {
            slidesToShow: 3 // 在大屏幕设备上显示3个幻灯片
          }
        }
      ]
    });
  });
</script>