添加多个jquery图像滑块

<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.8.1/slick.css">
<script src="https://cdn.jsdelivr.net/jquery.slick/1.8.1/slick.min.js"></script>

<div class="slider-container">
  <div class="slider">
    <div><img src="image1.jpg" alt="Image 1"></div>
    <div><img src="image2.jpg" alt="Image 2"></div>
    <div><img src="image3.jpg" alt="Image 3"></div>
  </div>
</div>

$(document).ready(function(){
  $('.slider').slick({
    slidesToShow: 3, // 每次滑动显示的图片数量
    slidesToScroll: 1, // 每次滑动滚动的图片数量
    prevArrow: '<button class="slick-prev" aria-label="Previous" type="button">Previous</button>', // 自定义上一张按钮
    nextArrow: '<button class="slick-next" aria-label="Next" type="button">Next</button>', // 自定义下一张按钮
    responsive: [
      {
        breakpoint: 768, // 响应式断点，屏幕宽度小于768px时生效
        settings: {
          slidesToShow: 1 // 每次滑动显示的图片数量
        }
      }
    ]
  });
});