jQuery「slick」プラグインを使う

jQueryの「slick」プラグインの実装方法です。

「Slick」公式サイト

CDNを使用する際は「slick」「CDN」で検索

https://cdnjs.com/libraries/slick-carousel

必要ファイルのダウンロード

「get it now」をクリックします。

「Download Now」をクリックして必要ファイルをダウンロードします。

ダウンローしたファイルを解凍し必要ファイルを確認します。

「Downloads」>「slick-1.8.1」>「slick-1.8.1」>「slick」

今回使用するファイルは以下です。

• fontsフォルダ
• ajax-loader.gif
• slick.css
• slick-theme.css
• slick.js か slick.min.js

jQueryプラグインの実装方法

1. HTMLで対象の文章構造を作成
2. CSSファイルでデザイン定義
3. JSで動きを定義
   1. jQuery本体の読み込み
   2. jQueryプラグインの読み込み
   3. jQueryプラグイン実行コードを記述
4. セッティング

使い方の確認

「usage」をクリックして使い方を確認します。

１．HTMLで対象の文章構造を作成

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

今回のコード

  <div id="eyecatch" class="clearfix">
    <div><img src="img/001.jpg" alt="画像"></div>
    <div><img src="img/002.jpg" alt="画像"></div>
    <div><img src="img/003.jpg" alt="画像"></div>
  </div>

２．CSSファイルでデザイン定義

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

今回のコード

<!-- slick用CSS読み込み -->
<link rel="stylesheet" href="css/slick.css" type="text/css">
<link rel="stylesheet" href="css/slick-theme.css" type="text/css">

CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />

３．JSで動きを定義

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

3-1.jQuery本体の読み込み

今回のコード

<!-- jQuery本体読み込み -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

3-2.jQueryプラグインの読み込み

今回のコード

<!-- slickプラグイン読み込み -->
<script src="js/slick.min.js"></script>

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

3-3.jQueryプラグイン実行コードを記述

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

基本

$(function(){
  $('カルーセル対象要素').slick();
});

セッティングありの場合

$(function(){
  $('カルーセル対象要素').slick({
    オプション名: 値,
    オプション名: 値,
         :
  });
});

今回のコード

$(function(){
  $('#eyecatch').slick({
    slidesToShow:1,
    slidesToScroll:1,
    autoplay:true,
    autoplaySpeed:2000,
    fade: true,
    dots: true,
  });
});

４．セッティング

jQueryプラグイン実行コードを使って細かな設定をします。

「setting」をクリックして設定を確認します。

各種設定が一覧になっています。

「設定名」「設定値（Type）」「省略時の初期値（Default）」「説明」が表示されています。

$(function(){
  $('#eyecatch').slick({
    slidesToShow:1,
    slidesToScroll:1,
    autoplay:true,
    autoplaySpeed:2000,
    fade: true,
    dots: true,
  });
});

今回のコード

$(function(){
  $('#eyecatch').slick({
    slidesToShow:1,
    slidesToScroll:1,
    autoplay:true,
    autoplaySpeed:2000,
    fade: true,
    dots: true,
  });
});

自動再生関連

画像切り替え時間とエフェクト関連

縦方向移動関連

表示画像関連

スライド開始・終了関連

ページ下部ドット関連

一時停止関連

画像の高さ関連

複数行関連

キーボード・マウス操作関連

左右矢印関連