slick.jsのカスタマイズなどを知りたい人はこちら
私がweb制作を始めた当初からトップページなどでスライダーを使用することがよくありました。
制作初めたころはどのスライダープラグインが使い勝手がいいか分からず、いろいろなものを試していました。ですので、その度にプラグインの使い方を調べて、時間がかかっていました。
しかし今ではほとんどslick.jsのみを使用しています。ほとんどのケースはslick.jsで対応できるので、本当に重宝しています。
slick.jsの特徴としては以下のものです。
- レスポンシブ対応
- ブレークポイントを設定でき、ブレークポイントでスライダーの設定を変更できる
- サムネイル付きのスライダーを作成できる
- オプションが豊富で多くのケースに対応できる
- MITライセンス
slick.jsの使い方
次に「slick.js」の使い方を紹介していきます。
ファイルの準備
最初にファイルのを下記のサイトの「Dowmload Now」からデータをダウンロードします。
（この記事を書いているときのslickのバージョンは1.8.0です。）
ダウンロードして解凍したフォルダの中にはいろいろ入っていますが、実際に使用する際に最低限必要なものは以下のものです。
- /slick/slick.min.js
- /slick/slick-theme.css
- /slick/slick.css
- /slick/ajax-loader.gif
- /slick/fonts/以下
使用する際にはjsとcssは別ファルダにしても問題ないのですが、
css、ajax-loader.gif、/fonts/の階層構造は変更させないほうがいいので、これらは同じファルダ内に設置してください。
使用方法
jQueryプラグインなので、jQueryと一緒に読み込んでください。
※ファイルパスは適宜変更してください。
<link rel="stylesheet" href="/slick/slick-theme.css">
<link rel="stylesheet" href="/slick/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/slick/slick.min.js"></script>
以下のDemo1はslickの最低限の設定をしたものです。
cssは見た目をそろえるために設定しているだけで、実際は「Demo1のjsカ所」が重要です。
Demo1
See the Pen slick-demo1 by blanks (@blanks-site) on CodePen.
Demo1のjsカ所
$(function(){
$("#slider").slick();
});
これだけでスライダーが実装できるなんて、最初の頃は本当に驚きました。ほんと、プラグインを制作してくださる方には感謝しかないです。
次にスライドを複数表示してみます。またレスポンシブ対応させて表示画面が狭くなると、スライドの枚数が変わるようにも設定してみます。
※CODEPENの「JS」ボタンを押せば、jsのコードが隠れて「Result」の表示範囲が広くなるので、スライドの枚数が変わります。
Demo2
See the Pen slick-demo2 by blanks (@blanks-site) on CodePen.
やっぱりスライダーには自動で動いてくれないと困ります。もちろんslick.jsにも自動スライドのオプションはあります。
またそれ以外のオプションもここでいくつか説明していきたいと思います。
Demo3
See the Pen slick-demo3 by blanks (@blanks-site) on CodePen.
「autoplay」は自動スライドさせるかどうかのオプションです。
「autoplaySpeed」で自動スライドを設定した場合のスライドが止まっている時間を設定できます。
「speed」で次のスライドに切り替わるまでの時間を設定できます。
「dots」をtrueにすれば、スライドの下にドットナビゲーションが表示されます。
「fade」をtrueにすれば、フェードインフェードアウトでスライドが切り替わります。
その他オプションなどをまとめてみました。
※間違っていた場合はご指摘ください。
slcik.js設定一覧
slickの配布元の英語を参考に記載しています。
初期値:「$(element)」の$(element)は下記で言うところの「$("#slider")」です。
$(function(){
$("#slider").slick();
});
オプション一覧
| accessibility | 初期値: true キーボードのtabキーと矢印キーでのスライドの切り替えを有効にする |
|---|---|
| adaptiveHeight | 初期値: false スライドの要素の高さが違う場合にスライドの高さをそろえる |
| autoplay | 初期値: false スライドの自動切り替え |
| autoplaySpeed | 初期値: 3000 autoplayをtrueにした場合のスライドが止まっている時間 |
| arrows | 初期値: true 前のスライド、次のスライドへの矢印ナビゲーションを表示する |
| asNavFor | 初期値: null スライド要素を2つ設置したときに、同期してスライドさせたいスライダーを設定する |
| appendArrows | 初期値: $(element) 矢印ナビゲーションが設置される要素 arrowsのナビゲーションはpostion:absoluteが適用されているので、position:relativeを適用する要素を変更したいときに使用します |
| appendDots | 初期値: $(element) ドットナビゲーションが設置される要素 dotsのナビゲーションはpostion:absoluteが適用されているので、position:relativeを適用する要素を変更したいときに使用します |
| prevArrow | 初期値: ' 前のスライドへの矢印ナビゲーションを設定します オリジナルの画像を矢印ナビゲーション使用したいときは' |
| nextArrow | 初期値: 初期値: ' 次のスライドへの矢印ナビゲーションを設定します オリジナルの画像を矢印ナビゲーション使用したいときは' |
| centerMode | 初期値: false スライドの中央配置 trueにすると前後のスライドが部分的に表示されます |
| centerPadding | 初期値: '50px' centerModeがtrueの場合に表示される前後のスライドの幅 |
| cssEase | 初期値: 'ease' スライドの切り替えのアニメーション設定 |
| customPaging | 初期値: n/a カスタムページングテンプレート |
| dots | 初期値: false ドットナビゲーションの表示 |
| dotsClass | 初期値: 'slick-dots' ドットナビゲーションを囲む要素のクラス名の設定 |
| draggable | 初期値: true マウスのドラッグでのスライド切り替えを有効にする |
| fade | 初期値: false スライド切り替えをフェードイン・フェードアウトにする |
| focusOnSelect | 初期値: false クリックで選択した要素へのフォーカスを有効にする |
| easing | 初期値: 'linear' jQueryアニメーションのイージングを追加 使用する際はjQueryのEasingプラグインを読み込む必要があります |
| edgeFriction | 初期値: 0.15 infiniteオプションがfalseの際、端（最初と最後）のスライドをスワイプした時の抵抗 |
| infinite | 初期値: true スライドのループを有効にする |
| initialSlide | 初期値: 0 最初に表示されるスライドを指定 |
| lazyLoad | 初期値: 'ondemand' レイジーローディング方法設定します'ondemand' か 'progressive'を設定 |
| mobileFirst | 初期値:false responsiveのオプションを設定している場合、ブレークポイントの小さい方から先に計算して表示します |
| pauseOnFocus | 初期値: true フォーカスするとautoplayが止まるのを有効にする |
| pauseOnHover | 初期値: true ホバーするとautoplayが止まるのを有効にする |
| pauseOnDotsHover | 初期値: false ドットナビゲーションにホバーするとautoplayが止まるのを有効にする |
| respondTo | 初期値: 'window' responsiveのオプションを設定している場合にブレークポイントを計算する基準を設定 |
| responsive | 初期値: none レスポンシブ対応時に設定 |
| rows | 初期値: 1 2以上するとに1つのスライドに複数のスライドを縦に並べて表示 |
| slide | 初期値: '' スライド要素を指定 |
| slidesPerRow | 初期値: 1 rowsオプションを2以上に設定している際、複数のスライドを横に並べて表示 |
| slidesToShow | 初期値: 1 1つのスライドに複数のスライド要素を表示 |
| slidesToScroll | 初期値: 1 切り替わるスライドの枚数を設定 |
| speed | 初期値: 300 スライドアニメーション時間の設定 |
| swipe | 初期値: true スワイプでのスライドの切り替えを有効にする |
| swipeToSlide | 初期値: false slidesToScrollに関係なく、ユーザーがスワイプでのスライドの切り替えを有効にする |
| touchMove | 初期値: true タッチでのスライド切り替えを有効にする |
| touchThreshold | 初期値: 5 スワイプでのスライド切り替え時、(1/設定値)×スライド要素幅で、次のスライドへ切り替える |
| useCSS | 初期値: true cssのtransitionを有効にする |
| useTransform | 初期値: true cssのtranformを有効にする |
| variableWidth | 初期値: false スライド要素幅の設定を有効にする |
| vertical | 初期値: false スライドの移動方向を縦にする |
| verticalSwiping | 初期値: false 縦方向のスワイプでのスライド切り替えを有効にする |
| rtl | 初期値: true スライドの移動方向を逆にする |
| waitForAnimate | 初期値: true スライドアニメーション中の、ユーザーによるスライドの切り替えを無効にする |
| zIndex | 初期値: 1000 スライダーのz-indexの値 |
イベント一覧
イベントの使用例は以下のようのとおりです。
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
//処理を書く
});
| afterChange | 引数: slick, currentSlide スライドが切り替わった直後に発火 |
|---|---|
| beforeChange | 引数: event, slick, currentSlide, nextSlide スライドが切り替わる直前に発火 |
| breakpoint | 引数: event, slick, breakpoint responsiveオプションで設定したbreakpointの切り替えが行われた直後に発火 |
| destroy | 引数: event, slick スライダーが破棄された時、またはslickが解除された時に発火 |
| edge | 引数: slick, direction infiniteオプションがfalseの時、端のスライドをスライドできない方向にスワイプさせた時に発火 |
| init | 引数: slick 最初にスライダーが初期化された直後に発火 |
| reInit | 引数: slick スライダーが再初期化された直後に発火 |
| setPosition | 引数: slick スライダーの位置/サイズが変更された直後に発火 |
| swipe | 引数: slick, direction スライダーがスワイプ/ドラッグされた直後に発火 |
| lazyLoaded | 引数: event, slick, image, imageSource lazyLoadで設定した画像が読み込まれた直後に発火 |
| lazyLoadError | 引数: event, slick, image, imageSource lazyLoadで設定した画像の読み込みが失敗した直後に発火 |
メソッド一覧
メソッドの使用例は以下のとおりです。
//スライド追加
$('.your-element').slick('slickAdd',"<div></div>");
//スライド再初期化
$('.your-element').slick('setPosition');
| slickCurrentSlide | 引数: none 現在のスライドのインデックス番号を返す |
|---|---|
| slickGoTo | 引数: slide number（数値）, dont animate（ブール値） slide numberでした番号のスライドに切り替える |
| slickNext | 引数: none 次のスライドへ切り替える |
| slickPrev | 引数: none 前のスライドへ切り替える |
| slickPause | 引数: none autoplayを止める |
| slickPlay | 引数: none autoplayをスタートする |
| slickAdd | 引数: HTML or DOM object, index, addBefore スライドを追加addBeforeを設定しなければ、indexで指定した要素の後にスライドが追加されます indexを設定しなければ、最後のスライドを基準にスライドが追加されます |
| slickRemove | 引数: index, removeBefore 指定したスライドを削除 |
| slickFilter | 引数: Selector or Function jQueryのfilter()を使用してスライドを削除 |
| slickUnfilter | 引数: index indexで指定したスライドのslickFilterを解除 |
| slickGetOption | 引数: option（文字列） 設定されているオプションの値を取得 |
| slickSetOption | 引数: option : (文字列), value : (optionに設定する値), refresh : (ブール値) スライド個別にオプションを設定 |
| unslick | 引数: none slickを解除 |
| getSlick | 引数: none slickの要素を取得 |
これだけオプションなどが充実しているので、カスタマイズができて、いろいろな場合に対応できるんです！
ただこれだけじゃslickの使い方が良く分からないと思うので、次回は応用編として説明したいと思います。それまでしばしお待ちを〜：)
以下、slickの実用的な使い方を紹介している記事です。ぜひ参考にしてください。