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

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    // センターモードをオフにする
        }
      }
    ]
  });
});