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

2023.02.16(Thu)

Web制作

まずは 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); // 中央のスライドは小さくしない
}

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

それではー！

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。

ブログ

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

おすすめ記事