Slick.jsは、WEBサイトで使われるスライダーを実装するためのJavaScriptライブラリです。
多様なオプション設定やプラグインの利用が可能であり、またタッチ操作にも対応していることが特徴的です。使いやすく軽量なため、ウェブサイトやアプリケーションの開発に幅広く利用されています。
ここではSlick.jsの数多くあるオプションをひとつひとつ解説していきます。
オプションの一覧
accessibility
| 型 | boolean |
| デフォルト | true |
| 説明 | キーボード操作やスクリーンリーダーなどのアクセシビリティを向上させるためのオプションです。trueにするとキーボードの矢印でスライダーを操作できたりと、より多くの人に使いやすくすることができます。 |
adaptiveHeight
| 型 | boolean |
| デフォルト | false |
| 説明 | スライダー内の各スライドの高さを自動的に調整するためのオプションです。スライダー内のすべてのスライドの高さが異なる場合、スライドの高さを自動的に調整して、スライドがバウンスしないようにすることができます。 |
autoplay
| 型 | boolean |
| デフォルト | false |
| 説明 | スライドを自動的に再生するかどうかを制御します。このオプションが有効になっている場合、スライダーが自動的に切り替わります。autoplaySpeedオプションでスライドの速度を設定できます。 |
autoplaySpeed
| 型 | number |
| デフォルト | 3000 |
| 説明 | autoplayオプションでスライドを再生する速度を制御します。値はミリ秒単位で指定します。 |
arrows
| 型 | boolean |
| デフォルト | true |
| 説明 | 前/次(< >)の矢印の表示を制御します。 |
asNavFor
| 型 | selector |
| デフォルト | null |
| 説明 | 複数のスライダーを同期させるためのオプションです。他のスライダーのセレクタを指定することで、2つ以上のスライダーのスライドを同期できます。 |
appendArrows
| 型 | string |
| デフォルト | $(element) |
| 説明 | 矢印ナビゲーションを表示する位置を変更できます。
appendArrows: '.slider-nav',とすると、.slider-nav内に矢印ナビゲーションが生成されます。 |
prevArrow,nextArrow
| 型 | HTMLテンプレート or jQueryオブジェクト形式 |
| デフォルト | $(element) |
| 説明 | 矢印アイコンを独自のスタイルにカスタマイズできます。2通りの記述方法があります。
●HTMLタグを直接記述する方法
記述したタグが生成され、戻るアイコンになる。
例：prevArrow: '<button class="prev">Previous</button>'
●jQueryオブジェクトを記述する方法
HTMLタグを自前で用意した後に、jQueryオブジェクトで指定してボタン化できる。
例：prevArrow: $('.slider-nav .prev')
|
appendDots
| 型 | string |
| デフォルト | $(element) |
| 説明 | ドットを表示する位置を変更できます。
appendDots: '.slider-nav'とすると、.slider-nav内にドットが生成されます。 |
centerMode
| 型 | boolean |
| デフォルト | false |
| 説明 | スライドを中央に配置するかどうかを制御します。前後の画像をチラ見せすることができます。 |
centerPadding
| 型 | string |
| デフォルト | ’50px’ |
| 説明 | centerModeが有効な場合に、左右の余白を調整するためのオプションです。 |
cssEase
| 型 | string |
| デフォルト | ease |
| 説明 | スライドの移動に使用するCSSトランジションの種類を指定できます。
linear: 一定速度でアニメーションします。
※autoplaySpeed: 0,と組み合わせれば、流れ続けるループスライダーも実現できます。
ease: 徐々に速度を上げて、最高速度で移動し、最後に徐々に減速します。デフォルトのタイミング関数です。
ease-in: 初めはゆっくり移動し、最後に速度を上げます。
ease-out: 初めは速く移動し、最後に徐々に減速します。
ease-in-out: 初めはゆっくり移動し、最高速度で移動し、最後に徐々に減速します。
cubic-bezier(n,n,n,n): カスタムタイミング関数を作成することができます。nは0から1の値を設定します。 |
スライド時に白くちらつく現象が起こるケースについて
おそらくcssEaseが原因（?）かと思われますが、以下のCSSを記述することで解決する場合があります。
.slick-slide {
-webkit-transform-style: preserve-3d;
}-webkit-backface-visibility: hidden; で直るという記事が多いですが、効果がない場合は上記コードで。
customPaging
| 型 | function |
| デフォルト | n/a |
| 説明 | ドットナビゲーションのマークアップを自由に構成することができます。例えば、ページ番号（数字）、画像、テキストにすることも可能です。
customPagingは、他のオプションと違いコールバック関数を指定します。 |
ドットを画像にした例
asNavForでもサムネイルを実現できますが、dotsをカスタマイズする方がより柔軟にカスタマイズできそうです。
dots
| 型 | boolean |
| デフォルト | false |
| 説明 | ページャーのドットの表示を制御します。このオプションが有効になっている場合、各スライドに対応するドットが表示されます。 |
dotsClass
| 型 | string |
| デフォルト | slick-dots |
| 説明 | ドットナビゲーションのクラス名を変更することができます。デフォルトは’slick-dots’ |
draggable
| 型 | boolean |
| デフォルト | true |
| 説明 | マウスまたはタッチ操作でスライドをドラッグできるかどうかを制御します。 |
fade
| 型 | boolean |
| デフォルト | false |
| 説明 | フェードイン/フェードアウト効果を有効にするかどうかを制御します。このオプションが有効になっている場合、スライドがフェードイン/フェードアウトされます。 |
focusOnSelect
| 型 | boolean |
| デフォルト | false |
| 説明 | フォーカスを切り替えるためのオプションです。このオプションが有効になっている場合、スライドをクリックすると、そのスライドがフォーカス（真ん中にくる）されます。 |
initialSlide
| 型 | number |
| デフォルト | 0 |
| 説明 | 最初に表示するスライドのインデックスを設定します。 |
lazyLoad
| 型 | string |
| デフォルト | ‘ondemand’ |
| 説明 | 画像の遅延読み込みを有効にするかどうかを制御します。
※lazyloadを使用する場合は、画像のsrc属性を設定するのではなく、data-lazy属性を使用する必要があります。
‘ondemand’
次のスライドの画像が表示される瞬間に、そのスライドに対応する画像を読み込む。かなり直前に読み込むため白くちらつく事があるが、一番負荷が少ない。
‘progressive’
最初の画像は通常通り読み込まれ、2番目のスライドが表示される前に画像（２番目）が読み込まれる。
‘anticipated’
最初の画像は通常通り読み込まれ、最初のスライドが表示されている間に、2番目のスライドに対応する画像とともに一度に読み込まる。
progressiveとanticipatedが似ていますが、anticipatedの方がより早いタイミングで次の画像を準備するため、負荷は高いがよりスムーズに表示できるということでしょうか。
|
pauseOnFocus
| 型 | boolean |
| デフォルト | true |
| 説明 | スライドがフォーカスされたときに自動再生を停止するかどうかを制御します。 |
pauseOnHover
| 型 | boolean |
| デフォルト | true |
| 説明 | マウスがスライダー上にあるときに自動再生を停止するかどうかを制御します。 |
pauseOnDotsHover
| 型 | boolean |
| デフォルト | fase |
| 説明 | ドットの上にマウスがあるときに自動再生を停止するかどうかを制御します。 |
responsive
| 型 | array |
| デフォルト | null |
| 説明 | レスポンシブデザインをサポートするためのオプションです。複数のブレイクポイントでスライダーの表示を調整できます。
‘responsive’オプションは、’breakpoint’と’settings’という2つのプロパティから構成されます。’breakpoint’は、スライドの表示幅がこの値以下になった場合、その設定が適用され、’settings’にはオプションを設定します。 |
respondTo
| 型 | string |
| デフォルト | window |
| 説明 | 'responvsive'オプション設定時に、’breakpoint’が反応する幅の基準を以下の3つから設定できます。
window
ウィンドウ幅を基準にbreakpointが反応する。
slider
スライダーの幅を基準にbreakpointが反応する。
min
windowとsliderのどちらか小さい方に対してbreakpointが反応する。 |
rows
| 型 | number |
| デフォルト | 1 |
| 説明 | スライダーを表示する行数を設定します。このオプションを2に指定した場合、グリッド化されスライダーが2段になります。 |
slidesPerRow
| 型 | number |
| デフォルト | 1 |
| 説明 | ‘rows’で2以上に設定した場合、スライド数を設定できます。 |
rtl
| 型 | boolean |
| デフォルト | fase |
| 説明 | スライダーを右から左に表示するかどうかを制御します。 |
speed
| 型 | number |
| デフォルト | 300 |
| 説明 | スライドのアニメーション速度を設定します。 |
slide
| 型 | selector |
| デフォルト | ” |
| 説明 | 特定のスライドを選択するためのオプションです。 |
slidesToShow
| 型 | number |
| デフォルト | 1 |
| 説明 | 表示するスライドの数を設定します。 |
slidesToScroll
| 型 | number |
| デフォルト | 1 |
| 説明 | スクロールするスライドの数を設定します。 |
swipe
| 型 | boolean |
| デフォルト | true |
| 説明 | スワイプ操作でスライドを移動できるかどうかを制御します。 |
swipeToSlide
| 型 | boolean |
| デフォルト | false |
| 説明 | スライドをスクロールする数（slidesToScroll）に関係なく、ユーザーがスライドを直接ドラッグまたはスワイプできるようにします。 |
touchMove
| 型 | boolean |
| デフォルト | true |
| 説明 | タッチ操作でスライドを移動できるかどうかを制御します。 |
touchThreshold
| 型 | number |
| デフォルト | 5 |
| 説明 | スワイプまたはタッチ操作と認識される移動距離の閾値を設定します。このオプションが小さいほど、操作が敏感になります。 |
useCSS
| 型 | boolean |
| デフォルト | true |
| 説明 | CSSトランジションを使用するかどうかを制御します。falseにするとjsアニメーションにjsアニメーションに切り替わります。※動きがガタガタします。CSSトランジション未対応の古いブラウザ向けです。 |
useTransform
| 型 | boolean |
| デフォルト | true |
| 説明 | CSS transformを使用するかどうかを制御します。 |
variableWidth
| 型 | boolean |
| デフォルト | false |
| 説明 | スライドの幅が異なる場合に使用するオプションです。このオプションが有効になっている場合、各スライドの幅を自動調整します。 |
vertical
| 型 | boolean |
| デフォルト | false |
| 説明 | スライダーを縦方向に表示するかどうかを制御します。 |
verticalSwiping
| 型 | boolean |
| デフォルト | false |
| 説明 | 縦方向のスワイプ操作を有効にするかどうかを制御します。verticalオプションが有効な場合に使用します。 |
waitForAnimate
| 型 | boolean |
| デフォルト | true |
| 説明 | アニメーションが完了するまで、次のスライドに移動できなくするかどうかを制御します。falseにすると遷移アニメーション中でもスライドを移動できます。 |
zIndex
| 型 | number |
| デフォルト | 1000 |
| 説明 | スライダーのz-indexを設定します。 |
まとめ
あらためてオプションを調べていると、知らなかったものもいくつか出てきて勉強になりました。
次回、イベントやメソッドも解説していきたいと思います。
