如何从一个目录中创建多个可滑动的图片库？(Slick )

<div id="slider1" class="slider"></div>

$(document).ready(function(){
  $('#slider1').slick({
    slidesToShow: 3, // 每次显示的图片数量
    slidesToScroll: 1, // 每次滚动的图片数量
    autoplay: true, // 自动播放
    autoplaySpeed: 2000, // 自动播放速度（毫秒）
    dots: true, // 显示导航点
    arrows: true, // 显示箭头导航
    responsive: [
      {
        breakpoint: 768, // 响应式断点
        settings: {
          slidesToShow: 2 // 在小屏幕上显示的图片数量
        }
      },
      {
        breakpoint: 480, // 响应式断点
        settings: {
          slidesToShow: 1 // 在更小的屏幕上显示的图片数量
        }
      }
    ]
  });
});

.slider {
  width: 100%;
  margin: 0 auto;
}

.slick-slide {
  margin: 0 10px;
}

.slick-prev:before, .slick-next:before {
  color: #000;
}