使用Slick-JS的居中幻灯片

<link rel="stylesheet" type="text/css" href="path/to/slick.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/slick.min.js"></script>

<div class="slider">
  <div><img src="path/to/image1.jpg"></div>
  <div><img src="path/to/image2.jpg"></div>
  <div><img src="path/to/image3.jpg"></div>
</div>

$(document).ready(function(){
  $('.slider').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 1
        }
      }
    ]
  });
});