Learning site for website creation

slickを使ってみる

  • 投稿日:2018年01月28日
  • 更新日:2018年01月29日

公式サイト:http://kenwheeler.github.io/slick/

下準備

必要なファイル

上から順に読み込む

  • slick.min.css:slick の基本デザイン
  • slick-theme.min.css:slick のテーマ用デザイン
  • 任意のファイル名.css:slick のデザインを変更する際にCSSを記述するファイル
  • jquery.min.js:jQuery 本体
  • slick.min.js:slick 本体
  • 任意のファイル名.js:slick の実行コードを記述するファイル

CDNを使って読み込み

CDN

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

jQuery用CDN:https://code.jquery.com/

CSSの読み込み

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css">

JSの読み込み

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="js/script.js"></script>

※</body>の直前に記述(動かない場合は<head>内に記述)することが多い

ファイルをダウンロードして読み込み

jQueryとslickの必要なファイルを公式サイトからダウンロードして任意の位置に配置した後読み込む

CSSの読み込み

<link rel="stylesheet" type="text/css" href="css/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="css/slick-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css">

JSの読み込み

<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/script.js"></script>

画像を配置

親にslick用の名前をつける(今回はid名で「slick01」)

  <ul id="slick01">
    <li><a href="#content01"><img src="images/eyecatch01.png" alt="アイキャッチ画像01"></a></li>
    <li><a href="#content02"><img src="images/eyecatch02.png" alt="アイキャッチ画像02"></a></li>
    <li><a href="#content03"><img src="images/eyecatch03.png" alt="アイキャッチ画像03"></a></li>
    <li><a href="#content04"><img src="images/eyecatch04.png" alt="アイキャッチ画像04"></a></li>
  </ul>

「lazyLoad」オプションを使って遅延ロードの際の書き方

  <ul id="slick01" class="nomarker">
    <li><a href="#content01"><img data-lazy="images/eyecatch01.png" src="images/brank.png" alt="アイキャッチ画像01"></a></li>
    <li><a href="#content02"><img data-lazy="images/eyecatch02.png" src="images/brank.png" alt="アイキャッチ画像02"></a></li>
    <li><a href="#content03"><img data-lazy="images/eyecatch03.png" src="images/brank.png" alt="アイキャッチ画像03"></a></li>
    <li><a href="#content04"><img data-lazy="images/eyecatch04.png" src="images/brank.png" alt="アイキャッチ画像04"></a></li>
  </ul>

※src属性には透明PNGを指定しておくとよいかと思います

jQueryで実行コードを記述する

基本

$(function(){
 $('#slick01').slick();
});

オプション指定

$(function(){
  $('#slick01').slick({
    オプション名: 値,
    オプション名: 値,
         :
  });
});

 

自動再生関連

オプション名 データ型 初期値 内容
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 自動再生時、カルーセルにフォーカスがある時に一時停止するか

画像遅延読み込み関連

オプション名 データ型 初期値 内容
lazyLoad 'ondemand'または'progressive' 'ondemand' 画像の遅延表示
img要素src属性に小さな透明画像を指定しdata-lazy属性に画像パスを記述する
例)<img data-lazy="images/eyecatch01.png" src="images/brank.png" alt="アイキャッチ画像01">
'ondemand'は画像が表示されるタイミングでload処理
'progressive'はバックグラウンドでload処理

画像の高さ関連

オプション名 データ型 初期値 内容
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 左右に「進む」「戻る」ボタンを表示させるか