【ソーコード】番外編：プラグイン「slick」／カルーセルスライダー（カスタマイズ）

目次

※コーディングの解説はCSS、JavaScriptのコメントを参照

ディレクトリ構成

    
extra8
 ├─img
 │  ├─mainvisual1.jpg
 │  ├─mainvisual2.jpg
 │  ├─mainvisual3.jpg
 │  ├─mainvisual4.jpg
 │  ├─mainvisual5.jpg
 │  ├─mainvisual6.jpg
 │  └─mainvisual7.jpg
 │
 ├─css
 │  └─style.css
 │
 ├─js
 │  └─main.js
 │
 └─index.html

HTML（index.html）

別タブで開く 
index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <meta name="description" content="テキストテキストテキストテキストテキストテキスト">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
    <script src="js/main.js"></script>
  </head>

  <body>
    <div class="content">
      <ul id="slider">
        <li><img src="img/mainvisual1.jpg" alt=""></li>
        <li><img src="img/mainvisual2.jpg" alt=""></li>
        <li><img src="img/mainvisual3.jpg" alt=""></li>
        <li><img src="img/mainvisual4.jpg" alt=""></li>
        <li><img src="img/mainvisual5.jpg" alt=""></li>
        <li><img src="img/mainvisual6.jpg" alt=""></li>
        <li><img src="img/mainvisual7.jpg" alt=""></li>
      </ul>
    </div>
  </body>
</html>

CSS（style.css）

別タブで開く 
style.css

@charset "UTF-8";

html {
  font-size: 100%;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
ul {
  list-style: none;
}

.content {
  width: 100%;
}

#slider {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/*
スライダー矢印（共通）
*/
#slider .prev,
#slider .next {
  width: 40px;
  height: 40px;
  background-color: #fff;
  cursor: pointer;
  opacity: 0.7;
  position: absolute;
  top: 45%;
  transition: 0.5s;
  z-index: 10;
}
#slider .prev:hover,
#slider .next:hover {
  opacity: 0.5;
}
#slider .prev::before,
#slider .prev::after,
#slider .next::before,
#slider .next::after {
  content: "";
  display: block;
  width: 14px;
  height: 2px;
  background-color: #000;
  position: absolute;
}

/*
スライダー左矢印
*/
#slider .prev {
  left: 0;
}
#slider .prev::before,
#slider .prev::after {
  left: 12px;
}
#slider .prev:before {
  top: 37%;
  transform: rotate(-45deg);
}
#slider .prev:after {
  bottom: 37%;
  transform: rotate(45deg);
}

/*
スライダー右矢印
*/
#slider .next {
  right: 0;
}
#slider .next::before,
#slider .next::after {
  right: 12px;
}
#slider .next:before {
  top: 37%;
  transform: rotate(45deg);
}
#slider .next:after {
  bottom: 37%;
  transform: rotate(-45deg);
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 900px) {
  #slider .prev,
  #slider .next {
    top: 40%;
  }
}

JavaScript（main.js）

別タブで開く 
main.js

$(function(){
  /*=================================================
  // カルーセル用 jQueryプラグイン「slick」
  // マニュアル：https://kenwheeler.github.io/slick/
  ===================================================*/
  $('#slider').slick({
    autoplay: true,                         // 自動再生オン
    autoplaySpeed: 3000,                    // スライドを3秒で切り替え
    arrows: true,                           // 左右の矢印を表示
    dots: true,                             // ドット（ページ送り）を表示
    slidesToShow: 1,                        // スライドを1枚表示（※centerModeをtrueにすると両端に2枚見切れた状態になる）
    centerMode: true,                       // センターモード（両端が見切れた状態になる）
    centerPadding: '18%',                   // 見切れたコンテンツの幅を18%に設定
    prevArrow:'<div class="prev"></div>',   // 前へ矢印のHTMLを変更する
    nextArrow:'<div class="next"></div>',   // 次へ矢印のHTMLを変更する
    responsive: [              // レスポンシブの設定
      {
        breakpoint: 900,       // 900px以下の場合に適用
        settings: {
          centerMode: false    // センターモードをオフにする
        }
      }
    ]
  });
});