Slick の使い方(1)レスポンシブ対応 jqueryプラグインスライダー

slickJavascript

これまで色々なスライダープラグインがありましたが、今はこれ一択です。

簡単・軽い・レスポンシブ!

備忘録を兼ねて使い方を紹介します。

Slickのダウンロード

以下より画面上部の [ Download Now ] をクリックしてダウンロード。
Slick 公式サイト

SlickのCSS・JSの読み込み

ダウンロードしたファイルのうち使うのは、以下3つ。

  • slick.css
  • slick-theme.css
  • slick.min.js

SCSS ファイルもあるので、CSSを編集する人は使うといいです。

//必須
<link rel="stylesheet" href="XXXX/slick.css"/>
//なくても平気
<link rel="stylesheet" href="XXXX/slick-theme.css">

//jQuery の読み込み(CDN で問題なし)
<script src="XXXXX/jquery.min.js"></script>
//必要な場合は読みこむ(バージョンの差異を補完するプラグイン/CDN で問題なし)
<script src="XXXXX/jquery-migrate-1.2.1.min.js"></script>
<script src="XXXXX/slick.min.js"></script>

CDNもあります

CDNも用意されているので、サーバーに設置するのが面倒い場合はこちらでも良いと思います。

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

//JS
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

SlickのHTMLの記述方法

下記の [ className ] を適宜設定し、それの中にスライドさせたいコンテンツを挿入します。

<div class="className">
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
</div>

Slickの設定

基本的には、以下の記述のみでスライダーは動きます。

$(document).ready(function(){
  $('.className').slick({
    setting-name: setting-value//色々なオプションを設定できます(後述します)
  });
});

Slickの基本記述のまとめ

<html> <head>
  <title>タイトル</title>

  //必須
  <link rel="stylesheet" href="XXXX/slick.css">
  //なくても平気
  <link rel="stylesheet" href="XXXX/slick-theme.css">

  </head>
  <body>

  <div class="className">
    <div>コンテンツ</div>
    <div>コンテンツ</div>
    <div>コンテンツ</div>
  </div>

  //jQuery の読み込み(CDN で問題なし)
  <script src="XXXXX/jquery.min.js"></script>
  //必要な場合は読みこむ(バージョンの差異を補完するプラグイン/CDN で問題なし)
  <script src="XXXXX/jquery-migrate-1.2.1.min.js"></script>
  <script src="XXXXX/slick.min.js"></script>

  <script>
    $(document).ready(function(){
      $('.className').slick({
        setting-name: setting-value//色々なオプションを設定できます(後述します)
      });
    });
  </script>

  </body>
</html>

オプションを設定することにより、色々なカスタイマイズができます。

次回は、オプションの設定を紹介します。

タイトルとURLをコピーしました