slick スライダーで真ん中のスライドだけ拡大表示する

まずは slick.js を読み込み見ます。
<head>タグ内か<body>の閉じタグ直前に記述します。

<!-- css -->
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">

<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="slick/slick.min.js"></script>

あとは HTM / JS / CSS をそれぞれ下記のように記述します。

// HTML

<div class="slide">
  <img src="slide-1.jpg" alt="">
  <img src="slide-2.jpg" alt="">
  <img src="slide-3.jpg" alt="">
  <img src="slide-4.jpg" alt="">
  <img src="slide-5.jpg" alt="">
</div>

// JS

<script>
$(function () {
  $('.slide').slick({
    autoplay: true, // 自動再生ON
    dots: true, // ドットインジケーターON
    centerMode: true, // 両サイドに前後のスライド表示
    centerPadding: '200px', // 左右のスライドのpadding
    slidesToShow: 1, // 一度に表示するスライド数
  });
});
</script>

// CSS

.slick-slide {
  height: auto;
  transform: scale(.70); // スライドのサイズを70%にする
  transition: opacity .5s, transform .5s; // スライド透過率と拡大のアニメーション時間を0.5秒に設定
  width: 100%;
}

/* 中央のスライド */
.slick-center {
  transform: scale(1); // 中央のスライドは小さくしない
}

これで真ん中のスライドだけ拡大表示されたような表示になります。

それではー！