【jQueryスライダープラグイン】slickの使い方

サイトをみていると、かなりの高確率でスライダーが使われていますよね。

今回はjQueryで動くスライダープラグイン、
「slick」の使い方を簡単にまとめてみたいと思います。

なお別のスライダープラグインである「Swiper」の基本的な使い方は、
こちらの記事でまとめているのでよろしければご参照ください。

【スライダープラグイン】Swiperの使い方サイトではほとんど必ずと言っていいほどスライダーが使われていますよね。 スライダーはいちから作ることもできますが、便利なプラグインもたくさんあります。 今回はプラグインのひとつであるSwiperの使い方を簡単にまとめたいと思います。...

slickを使うためのおおまかな手順

slickのページはこちらになります。

ではそれぞれの手順についてもう少し詳しくみていきましょう！

手順1：データをダウンロードする

slickの「Go Get It」の「Download Now」ボタンからデータをダウンロードできます。

必要なファイルはslickフォルダ内にある下記になります。

手順2：必要なデータを自分のフォルダに読み込む

先ほどダウンロードしたファイルとjQueryをフォルダに読み込みます。

JS系はjQueryとslick.jsの2つの読み込みが必要ですが、j
Queryを先に読み込みましょう。

手順3：HTML構造を作る

親子構造にして、親要素に任意のクラス名をつけます。

<div class="任意のクラス名をつける">
  <div>スライド1</div>
  <div>スライド2</div>
  <div>スライド3</div>
</div>

手順4：jQueryで発火させる

jQueryで以下の宣言をして、slickを発火させます。

$(document).ready(function(){
  $('HTMLで指定した任意のクラス名').slick({
    カスタマイズする場合は、ここに指定していく。
  });
});

手順5：必要に応じてカスタマイズする

手順4まででも基本的なスライダーの機能は実装できますが、
状況に応じてカスタマイズできる値がたくさんあります。

よく使いそうなカスタマイズ設定を下記に列挙しました。

カスタマイズ方法をマスターすると、
サイトに応じた様々なスライダーを作ることができますね！

以上、slickスライダーの使い方でした。

【スライダープラグイン】Swiperの使い方サイトではほとんど必ずと言っていいほどスライダーが使われていますよね。 スライダーはいちから作ることもできますが、便利なプラグインもたくさんあります。 今回はプラグインのひとつであるSwiperの使い方を簡単にまとめたいと思います。...