Learning site for website creation

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

  • 投稿日:2017年08月27日
  • 更新日:2019年01月27日

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」をクリックして使い方を確認します。

1.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>

2.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" />

3.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,
  });
});

4.セッティング

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,
  });
});

自動再生関連

オプション名 データ型 初期値 内容
autoplay true もしくは false false 自動再生させるか
autoplaySpeed 数値(ミリ秒) 3000 画像を表示している時間
speed 数値(ミリ秒) 300 切り替え時の時間

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

オプション名 データ型 初期値 内容
speed 数値(ミリ秒) 300 切り替え時の時間
cssEase 文字列 'ease' 画像切り替え時のイージングを CSS3 Animation Easing で指定
'linear'
'ease-in'
'ease-out'
'ease-in-out'
'cubic-bezier(x1, y1, x2, y2, ・・・ )' ※3次ベジエ曲線の座標を指定
http://cubic-bezier.com/
fade true もしくは false false 画像を切り替えをフェードイン・フェードアウトにさせるか
easing 文字列 'linear' イージングを指定 (fadeに対する??よくわからん・・・)

縦方向移動関連

オプション名 データ型 初期値 内容
vertical true もしくは false false 画像を縦方向に移動させる ※表示画像すべての高さが揃っていないと表示開始位置がずれるので注意
verticalSwiping true もしくは false false スマホ使用時、縦方向スワイプに対応させる

表示画像関連

オプション名 データ型 初期値 内容
slidesToShow 数値 1 表示する画像の数
slidesToScroll 数値 1 移動させる画像の数
variableWidth true もしくは false false 通常カルーセル表示領域の幅より表示画像幅が狭いと白い余白が生まれるが、 true 指定時は次の画像が余白なしに表示される
centerMode オプションと合わせて中央表示左右チラ見せさせることが多い
centerMode true もしくは false false 画像を中央表示させ centerMode オプションで前後の画像をチラ見させる
カルーセル表示領域の幅が表示画像より広い場合は左に centerMode オプションで指定した余白が表示され左寄せになる
そのためカルーセル表示領域の幅を可変させている時は variableWidth を有効にする
centerPadding 文字列 '50px' centerMode オプション有効時にどれくらいチラ見させるか(px もしくは %)

スライド開始・終了関連

オプション名 データ型 初期値 内容
edgeFriction integer 0.15(秒数) 無限スライドしない場合に端のスライドから更に進もうとした場合のバウンド処理の動作秒数
infinite true もしくは false true 最後のスライドの次に最初のスライドを表示するか
false指定時は最後まで進むと逆戻りする
initialSlide integer 0 最初の表示画像の位置 ※0からカウントしているので注意

ページ下部ドット関連

オプション名 データ型 初期値 内容
dots true もしくは false false カルーセル下にドットを表示させるか
dotsClass 文字列 'slick-dots' カルーセル下のドット用リストのclass名を指定

一時停止関連

オプション名 データ型 初期値 内容
pauseOnHover true もしくは false true 自動再生時、カルーセル上にマウスがある時に一時停止するか
pauseOnDotsHover true もしくは false false 自動再生時、下部ドットにマウスがある時に一時停止するか
pauseOnFocus true もしくは false true 自動再生時、カルーセルにフォーカスがある時に一時停止するか

画像の高さ関連

オプション名 データ型 初期値 内容
adaptiveHeight true もしくは false false カルーセルの高さを画像の高さに合わせて可変させる

複数行関連

オプション名 データ型 初期値 内容
rows int 1 1以上に設定すると複数行で画像が表示される
slidesPerRow オプションで各行に表示する画像数を設定
slidesPerRow 数値 1 rows オプションがtrue時有効
各行に表示する画像数を設定

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

オプション名 データ型 初期値 内容
accessibility true もしくは false true キーボード左右ボタンで画像の切り替えをさせる
draggable true もしくは false true ドラッグが可能か否か

左右矢印関連

オプション名 データ型 初期値 内容
arrows true もしくは false true 左右に「進む」「戻る」ボタンを表示させるか