スライダープラグイン「slick」の基本の使い方

2022-08-13

「slick」は、レスポンシブ対応のjQueryスライダープラグインです。
当記事では、slickを使うために最低限押さえておきたいポイントをまとめます。

公式サイト： https://kenwheeler.github.io/slick/
GitHub ： https://github.com/kenwheeler/slick

jQuery本体と、プラグインのJS&CSSを読み込む

CDNを使った読み込み方はこちらです。jQuery本体も忘れないようにしましょう。

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">

<!-- JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

ローカルにダウンロードして使いたい場合は公式サイトから。
また、過去のバージョンが必要なときはGitHubから入手できます。

シンプルなスライダーの作り方

当記事では基本的な使い方として、ごくシンプルなスライダーのサンプルコードをご紹介します。

See the Pen Untitled by mgtnsn (@mgtnsn) on CodePen.

全画面で表示（CodePenへ）

ソースコードの抜粋・解説

上記のサンプルでは、親の <div id="js-slick"> に対してslickを実行しています。
直下にある<div class="slide"> がスライダー1枚になります。

<div class="slider" id="js-slick">
  <div class="slide"><span>1</span></div><!-- 1枚目 -->
  <div class="slide"><span>2</span></div><!-- 2枚目 -->
  <div class="slide"><span>3</span></div><!-- 3枚目 -->
  <div class="slide"><span>4</span></div><!-- 4枚目 -->
  <div class="slide"><span>5</span></div><!-- 5枚目 -->
</div>

実行時のオプションには、自動再生やナビゲーション（矢印／ドット型）、無限ループの設定を記述しています。

$('#js-slick').slick({
  autoplay: true, //自動再生
  autoplaySpeed: 3000, //自動再生の速度
  arrows: true, //前へ・次への矢印ナビを表示
  dots: true, //ドット型のナビを表示
  infinite: true //無限ループ
});

その他、覚えておきたい機能など

ここまでの基本以外で、slickを導入する際に覚えておきたい点を紹介します。

PCとSPでオプションを変更する（レスポンシブ対応）

responsive オプションを使うと、ブレークポイントごとに設定を変えることができます。
以下は「画面サイズが768px以下になったら矢印ナビを無効にする」例です。

$('#js-slick').slick({
  arrows: true, //矢印ナビを表示
  responsive: [
    {
      breakpoint: 768, //ブレークポイント(px)
      settings: {
        arrows: false, //矢印ナビを非表示
      }
    }
  ]
});

「768px以上になったら」としたい場合は、mobileFirst オプションを追加します。

$('#js-slick').slick({
  arrows: true, //矢印ナビを表示
  mobileFirst: true, //モバイルファーストに
  responsive: [
    {
      breakpoint: 768, //ブレークポイント(px)
      settings: {
        arrows: false, //矢印ナビを非表示
      }
    }
  ]
});

読み込み直後のガタつきを解消する

ページの表示直後～slickの実行が完了するまでの間、一瞬スライドが縦に並んで見えてしまうことがあります。

slickが実行完了すると、指定した要素に .slick-initialized というクラスがつくのでこれを使って対策することができます。

<!-- slickによってclassが付与された親div(#js-slick) -->
<div class="slider slick-initialized slick-slider slick-dotted" id="js-slick">
...

.slider{
  display: none; /* 最初は非表示に */
}
.slider.slick-initialized{
  display: block; /* slickが実行完了したら表示 */
}

slickサンプル集

シンプルなスライダー

See the Pen Untitled by mgtnsn (@mgtnsn) on CodePen.

PC表示時は3枚、SP表示時は1枚

See the Pen Untitled by mgtnsn (@mgtnsn) on CodePen.

サムネイル付き

See the Pen Untitled by mgtnsn (@mgtnsn) on CodePen.

ブラウザ幅100%、左右をチラ見せ

See the Pen Untitled by mgtnsn (@mgtnsn) on CodePen.

右側だけはみ出した状態からスタート

See the Pen Untitled by mgtnsn (@mgtnsn) on CodePen.