【jQuery】スライダーを実装しよう!プラグインslickで超簡単!

jQuery/JavaScript
この記事は約11分で読めます。

画像が一定の時間で切り替わるような動きって、難しそうですね

spica
spica

スライダーのことですね。

jQueryのプラグイン「slick」を使えば、簡単に実装できますよ!

EDIT ON CODEPENをクリック!

See the Pen Untitled by spica (@spica_blog) on CodePen.

slickは、スライダー(カルーセル)が簡単に実装でき、オプションの種類が豊富で、レスポンシブ対応もしている便利なjQueryのプラグインです。

スポンサーリンク

プラグインslickの導入方法

他のプラグインと同様に、導入するにはファイルのダウンロードかCDNを利用します。

slick公式サイトのメニューから、get it nowをクリックします。

ファイルをダウンロードする

Download Nowをクリックすると、圧縮ファイルがダウンロードされますので、解凍してフォルダを展開します。

最低限必要なファイルは「slick.css」「slick.min.js」です。

slick公式のテーマを使う場合、「fonts」「ajax-loader.gif」「slick-theme.css」も必要になります。

これらのファイルをローカルに保存します。

<head>タグ内に以下のように記述し、パスを適宜変更します。

<link rel="stylesheet" type="text/css" href="./slick.css/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="./slick.css/slick-theme.css" media="screen" />
<!-- 独自のcssファイルはこの下に記述 -->

<body>の閉じタグの直前に以下のように記述し、パスを適宜変更します。

<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="./js/slick.min.js"></script>
<!-- 独自のjsファイルはこの下に記述 -->

jQuery本体ファイルは、ここではローカルから読み込ませていますが、CDNでももちろん大丈夫です。

ブラウザでは上から下にスクリプトを読んでいくので、jQueryの処理を実行するためにはjQuery本体ファイルが先に読み込まれている必要があります。ですので、上から jQuery > slick > 制作用jsファイル の順になります。記述の順番を間違えないようにしましょう。

「fonts」フォルダと「ajax-loader.gif」は、「slick.css」などと同じディレクトリに置きましょう。

CDNを使う

CDNのコードをコピーします。

<head>タグ内に以下のように記述します。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- 独自のcssファイルはこの下に記述 -->

jQuery本体ファイルも読み込みます。ここではGoogleのCDNを採用していますが、公式サイトやMicrosoftのものもあります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- 独自のcssファイルはこの下に記述 -->

CDNを読み込む場合、このままのファイル名ではローカルで動作しません。「//cdn~」の頭に「https:」を付けると動くようになります。

お名前.com

HTMLの記述

HTMLファイルの任意の場所に、スライダー部分の記述をします。

パスは適宜変更してください。

<ul class="slider">
      <li><img src="img/picture1.jpg" alt=""></li>
      <li><img src="img/picture2.jpg" alt=""></li>
      <li><img src="img/picture3.jpg" alt=""></li>
      <li><img src="img/picture4.jpg" alt=""></li>
      <li><img src="img/picture5.jpg" alt=""></li>
      <li><img src="img/picture6.jpg" alt=""></li>
</ul>

CSSの記述

スライダー自体のサイズ等を指定しておきます。

.slide {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.slide li {
  list-style: none;
}
.slide li img {
  max-width: 100%;
  object-fit: cover;
}

JavaScriptの記述

HTMLファイル内で<script>タグで囲って記述する方法と、制作用のjsファイルを作成し、HTML内のhead要素の中で参照する方法があります。

基本の書式

slickのコードの書き方はとても簡単です。

slickはまずこのコードを記述してから始まります。

$(function(){
    $('セレクタ').slick();
});
EDIT ON CODEPENをクリック!

See the Pen slick basic by spica (@spica_blog) on CodePen.

この時点ではスライダーには最低限の機能しかありません。動作や表示に関する指定は、オプションで行います。

オプションについて

slickのオプションは、以下のようなものがよく使われています。

  • 表示枚数の設定
  • 最後の画像まで表示したら、最初に戻るようにするか
  • 左右の矢印の表示
  • ドット(ページ送り)の表示
  • スクロール枚数の設定
  • 切り替えのスピード
  • 自動再生のオンオフ
  • 自動再生時、何秒で切り替えるか
  • 表示位置、両サイドの見切れの幅の設定
  • フェードイン、フェードアウト
  • レスポンシブ設定 など

オプションの記述は、「$(‘セレクタ名’).slick()」のslick()内に、「オプション名: 値」をカンマ(,)で繋げ{}で囲います。

$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

オプションの種類

オプション名初期値説明
slidesToShow数値1表示枚数
slidesToScroll数値1スクロール枚数
autoplaytrue / falsetrue自動再生
autoplaySpeed数値(ミリ秒)3000自動再生のスピード
infinitetrue / falsetrue無限再生
speed数値(ミリ秒)300スクロールやアニメーションのスピード
fadetrue / falsefalseフェードアウト、フェードアウトの設定
dotstrue / falsefalseドット(ページ送り)
arrowstrue / falsetrueスライダーの左右に矢印を付ける
centerModetrue / falsefalseスライド1枚を中央に置き、両サイドに前後のスライドが見切れるようにする
centerPadding数値(px / %)'50px'見切れの幅
cssEaseease / linear / ease-in / ease-out / ease-in-out'ease'アニメーションの進め方
responsiveオブジェクトnoneレスポンシブの設定
accessibilitytrue / falsetrueキーボードの左右ボタンで画像の切り替え
adaptiveHeighttrue / falsefalseスライダーの高さを現在のスライドに合わせる
prevArrow文字列戻るボタンのHTMLを指定する
nextArrow文字列進むボタンのHTMLを指定する
dotsClass文字列'slick-dots'ドットのクラス名を指定する
lazyLoadondemand / progressive'ondemand'画像の遅延表示処理lazyload対応。スライドした領域が表示されるタイミングで読み込み開始する。
swipetrue / falsetrueスワイプに対応するか
touchMovetrue / falsetrueタッチムーブ機能を有効にするか
variableWidthtrue / falsefalseスライドごとに横幅を可変にするか
verticaltrue / falsefalse縦方向にスライドするか
verticalSwipingtrue / falsefalse縦方向のスワイプに対応するか

レスポンシブの設定方法

オプションの中でレスポンシブの設定ができますが、少し分かりにくい部分でもあります。

CSSの記述のようなものなので、ポイントを掴めば難しくはありません。

responsive: [
  {
  breakpoint: //ブレークポイント
  settings: {
    //ここに処理を記述
  }
  }  //複数のブレークポイントがある場合、カンマで区切って同様に記述
]

ブレークポイントが2つのサンプルです。

$('.slider').slick({
  autoplay: true,
  dots: true,
 // スライドの最後まできたら次には進まない
  infinite: false,
  speed: 300,
 // 通常時はスライドは4枚表示、4枚ずつスライド
  slidesToShow: 4,    
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
    // 1024px以下の時、スライドは3枚表示、3枚ずつスライド
        slidesToShow: 3,  
        slidesToScroll: 3,
    // スライドの最後まで来たら最初に戻る
        infinite: true,  
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        // 600px以下の時、スライドは2枚表示、2枚ずつスライド
        slidesToShow: 2,  
        slidesToScroll: 2
      }
    }
  ]
});
EDIT ON CODEPENをクリック!

See the Pen slick breakpoint by spica (@spica_blog) on CodePen.

ムームードメイン

ドット、矢印のカスタマイズ

slickのテーマでスタイルが指定されているものは、「slick-theme.css」でクラス名を確認し、制作用のcssファイルで上書きをします。

ドットをカスタマイズする

例えば、ページ送りのドットがアクティブな時のスタイルは、slick-theme.cssでは以下のように記述されています。

.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;  // アクティブになると黒に変わる
}

制作用cssファイルに、以下のように記述してみましょう。

.slick-dots li.slick-active button:before
{
    color: red;  // アクティブになると赤に変わる
}

矢印をカスタマイズする

矢印(arrows)のスタイルを変更する場合は、左は「.slick-prev」、右は「.slick-next」を指定して変更します。

/* 左右の矢印をカスタマイズ */
/* 矢印を画像の上に表示 */
.slick-prev {
  left: 20px;
  z-index: 100;
}
.slick-next {
  right: 45px;
}
/* 矢印の大きさと色を変更 */
.slick-prev:before,
.slick-next:before
{
    font-size: 50px;
    color: black;
}
EDIT ON CODEPENをクリック!

See the Pen slick sample_arrows by spica (@spica_blog) on CodePen.

矢印を任意の画像に変更する

矢印をお好きな画像に変更することもできます。制作用jsファイルのコードのオプションに、「prevArrow」「nextArrow」を追記し、画像のパスとクラス名を記述します。

CSSでポジションやサイズ等の変更をするためにクラス名を付けますが、左右共通の部分は「slide-arrow」、左は「prev-arrow」、右は「next-arrow」としてあります。

「slick-arrow」と指定してしまうと、元々slickが使用しているクラス名のため思わぬトラブルの原因になりかねませんので気を付けましょう。

$(function(){
  $(".slider").slick({
    prevArrow: '<img src="戻る矢印画像のパス" class="slide-arrow prev-arrow">',
    nextArrow: '<img src="次へ矢印画像のパス" class="slide-arrow next-arrow">'
  });
});
EDIT ON CODEPENをクリック!

See the Pen slick sample_arrows2 by spica (@spica_blog) on CodePen.

まとめ

jQueryのプラグインslickでのスライダーの実装方法をご紹介しました。

slickっておしゃれなスライダーが簡単に実装できるんですね!

spica
spica

動作の安定性の高さも人気の理由の一つです。

ウェブ制作の現場でもよく使われている人気のプラグインslick。

自分が作りたいスライダーが実装できるか、操作性はどうなのか、ぜひ一度試してみてください!

コメント