Weblasts

『slick』の基本的な使い方(オプションなど)を細かくまとめていく

slickの使い方とオプションまとめ

以前紹介した“『slick』を使った無限ループスライダーの作り方と注意点“の記事が結構人気みたいなので、改めてjQueryのプラグイン『slick』の使い方をまとめていくことにします。

実際に動く、よく使うオプションのサンプルを配置していくのでページ自体が重めになりますがよろしくどうぞ。

応用したものはこちらにあります

slickとは

ここで紹介するslickは、レスポンシブ対応しているスライダー用のjQueryプラグインです。

複数のブレイクポイント、CSS3のトランジション、タッチイベント&スワイプなどにも対応しているので、カスタマイズ次第でかなり多くの表現ができるようになります。

使う前の準備

slickはjQueryプラグインなので、DLして必要なファイルを用意して読み込むか、CDNを使って読み込む必要があります。 どちらもslickのサイトから入手できるので入手していきます。

ファイルをダウンロードする場合

slickのサイトに移動してメニュー右端にある「get it now」をクリック

slickのサイトメニュー右端にある「get it now」の位置

移動先にある「Download Now」をクリックするとzipファイルのDLが始まります。

「Download Now」の位置

DLしたzipファイルは解凍して必要なファイルをslick用のフォルダを作って中に移動させましょう

必要なファイルは以下のとおりです

  • slick.min.js
  • slick.css
  • slick-theme.css
  • ajax-loader.gif ※ローディング用
  • font ※矢印用

あとはhead要素の内部でjsファイルと2つのcssファイルを読み込みましょう。


CDNを利用する場合

DLする場合と同じくslickのサイトに移動してメニュー右端にある「get it now」をクリック

slickのサイトメニュー右端にある「get it now」の位置

移動先にあるDLやgithubボタンの下にある「You can also use slick with the jsDelivr CDN!」下部のコードがCDN用のコードになります。
このコードをhead要素の内部にコピペしましょう

これで使うためのファイル類の準備は完了です

slickをとりあえず動かしてみる

各種ファイルの読み込みが完了したら、実際に動かしてみます。

ここでは下記のようなコードを用意しましたので、こちらを使って解説していきます

スライダー全体をクラス「slider」がついたdiv要素で囲み、動かすコンテンツはdiv要素(一部img要素)になっています

まずはslickを動かすコードを書いていきます。
slickを動かすにはスライダー全体を囲んでいる要素をjQueryオブジェクトにし、実行していきます。

head要素の最後にscript要素を作り、下のようなコードを入れるととりあえずslickが動き、スライダーが表示されるはずです。

ここまでではまだオプションの設定がありませんので手動のスライダーにはなりますが完成になります

ファイルをDLして使った場合は前後へスライドする矢印型のアイコンフォントが表示され、CDNを使った場合は「Previous」「Next」のボタンが表示されます。

ボタンクリックやタッチで動きますし、スライドをマウスカーソルでのドラッグやスワイプして切り替えられることが確認でき、かなりお手軽なのがわかるはずです。

slick起動直後

DLしたファイルを使った場合、アイコンフォントはデフォルトでは白なので見えにくい形になっています。
※ ここでは矢印の色を黒にして見えやすくしています

表示位置はスライダーの外側に配置されているので、ウィンドウサイズからはみ出して、スクロールバーが出てくる原因になったりしますのでご注意ください。

slickのオプション

slickは豊富なオプションが用意されているので、先程のコードにオプションを追加してカスタマイズしていきます

オプションはslickのあとにある()の中に{}を入れこの中に『オプション名:値』の形で記述していきます。
次の行にもオプションを書く場合には値のあとに『,』を打ちましょう

動きを操作するオプション

まずは動き方や時間を設定できるオプションです。
よく使われるものが多いと思います。

オプション名 デフォルト値 使える値や仕様
speed 300 スライドの切り替えにかける時間の設定
※ デフォルトの300は切り替えに0.3秒間かける
autoplay false 自動再生させるかを設定するオプション
値に『true』を入れると自動再生する
autoplaySpeed 3000 自動再生時のスライドの表示時間の設定
※ デフォルトの3000は3秒間表示したあと切り替え
infinite true スライドをループさせるかの設定
値に『false』を入れるとループしなくなる
自動再生したときの動き
true:①→②→③→①→②→③→①ループする
false:①→②→③→②→①→②→③とループしないで戻る
vertical false 縦方向(下から上)にスライドさせたい場合は『true』にする
※ fadeのオプションが『true』だとバグるので共存不可能
fade false 『true』にするとスライドの切り替えをフェードイン・フェードアウトに切り替える
※ verticalのオプションが『true』だとバグるので共存不可能
easing ‘linear’ jQueryのイージングを文字列形式で設定できる
※ jquery-uiで用意されているものも読み込んであれば利用可能
cssEase ‘ease’ 画像切り替え時のイージングを CSS3のAnimationEasingで設定できるオプション キーワード型の’ease”ease-in”ease-out”ease-in-out”linear”step-start”step-end’や関数での指定’steps(4, jump-end)”cubic-bezier(0.1, 0.7, 1.0, 0.1)’ ができる
useCSS true CSSのtransitionを有効にするかの設定
useTransform true CSSのtransformを有効にするかの設定
rows 1 スライダーの行数を設定するオプション. 2以上に設定すると、グリッドモードが初期化されます。slidesPerRowを使用して、各行に含めるスライドの数を設定します。
slidesPerRow 1 rowsの値が2以上のとき、1行に表示するスライド数を設定できるオプション。
variableWidth false スライド幅の自動計算を無効にするための設定。
※ trueにすると自動計算が無効になる
rtl false スライドの向きを変えるための設定
※ このオプションを使う場合はスライダーのコンテナに『dir=’rtl’属性』を付与しないとうまく動かない。

自動再生

例えば自動再生をさせたいと思ったら『autoplay:true』をオプションに入れてみます

SAMPLE 自動再生

縦方向 + スピード調整

下から上にむかって縦方向にアニメーションさせたい場合は『vertical:true』をオプションに入れます

切り替えにかけるスピード『speed:1000』を1秒に設定もしてみます

SAMPLE 縦方向 + スピード調整

『vertical:true』をオプションを使うとスライドの周りに1pxの透明のボーダーが付くので切替時に隙間が空いているように見えます。
対応したい場合はcssで上書きする形を取るといいでしょう

フェード + 表示時間調整

切り替えにかけるスピードは1秒のまま、スライドをフェードイン・フェードアウトさせたい場合は『fade:true』をオプションに入れます
※ verticalのオプションが『true』だとバグるので注意!

スライドの表示時間を『autoplaySpeed:5000』で5秒に設定もしてみます

SAMPLE フェード + 表示時間調整

ループ(infinite)解除

デフォルトではスライドはループして表示されますが『infinite:false』を設定することで、この設定を外すこともできます。

SAMPLE ループ解除

『infinite:false』は、最初のスライドが表示されているときの前に戻る矢印アイコンと、最後のスライドが表示されているときの次へ進む矢印アイコンには、特別なクラスが付与されています。
※ デフォルトは『opacity: .25』がついています

見た目を変えたい場合はこちらのcssを上書きして操作するといいでしょう。

例としてここでは消してみます

矢印アイコンをカスタム

ループ解除 + 自動再生

『infinite:false』は自動再生と組み合わせると言ったり来たりするスライドになります

SAMPLE ループ解除 + 自動再生

表示に関するオプション

見た目などを変えるためのオプションです。
この辺もよく操作すると思います。

オプション名 デフォルト値 使える値や仕様
arrows true 左右にでる矢印の表示設定
※ 非表示にする場合はfalseを設定する
prevArrow <button type=”button” class=”slick-prev”>Previous</button> 前への矢印のHTMLを変更する
※ 変更用のHTMLタグを文字列として入れる
nextArrow <button type=”button” class=”slick-next”>Next</button> 後への矢印のHTMLを変更する
※ 変更用のHTMLタグを文字列として入れる
appendArrows スライダー内部 矢印アイコンの生成場所を変更する
値はHTMLにドットインジケーター用の要素を作りjQueryオブジェクトの形で設定する
dots false ドットインジケーターを表示する
※ 表示する場合はtrueを設定する
dotsClass ‘slick-dots’ ドットナビのクラス名の変更するオプション付けたいクラス名を文字列で指定する’my-dots’
appendDots スライダー内部 ドットインジケーターの生成場所を変更する
値はHTMLにドットインジケーター用の要素を作りjQueryオブジェクトの形で設定する
customPaging なし dots:trueのとき、ドットをサムネイルなどにカスタマイズするfunctionをつかってカスタマイズ可能
slidesToShow 1 スライドの表示数の設定
※ 表示したい数を数値で指定する
slidesToScroll 1 1度にスライドする数の設定
※ スライドさせたい数を数値で指定する
adaptiveHeight false trueの場合、高さ可変
faleseの場合、高さ固定
centerMode false センターモード(=両端見切れ状態)になる
centerPadding ’50px’ センターモード時、見切れたコンテンツの幅をpx指定できる
asNavFor null スライダーを他のスライダーのナビゲーションとして連携しサムネイル付きのスライダーを実装できる
lazyLoad ondemand 画像読み込みのタイミングを設定する。
・ondemand:画像をスライドさせると画像を読み込む。
・progressive:ページが読み込まれた後に非表示の画像を読み込む。
zIndex 1000 z-indexの値を設定できるオプション

矢印の表示非表示

『arrows:false』を設定すると矢印が消えてくれます

SAMPLE 矢印の表示非表示

もともとスライドの外にある矢印の位置調整はcssで行えますので移動させたい場合はこちらを操作しましょう。
※ z-indexを指定しないと前へ戻るボタンがスライダーに潜りこむので注意

矢印の位置調整

表示する矢印を変更

『prevArrow』を設定すると前への矢印のHTMLを変更することができ、『nextArrow』を設定すると後への矢印のHTMLを変更することができます。 ※ 変更用のHTMLタグを文字列として入れます。

ここでは画像を置いたときの例として紹介します

SAMPLE 表示する矢印を変更

東急ハンズみたいになってしまいました

これで指定した画像は表示されますが、位置などの調整が必要なのでcssで調整しましょう

下のリンクの記事で詳しく紹介しています

ドットインジケーターの表示切り替え

『dots:true』を設定するとドットインジケーターを表示します

SAMPLE ドットインジケーターの表示切り替え

表示するスライド数の調整

『slidesToShow』を設定すると表示するスライド数の調整ができます。デフォルトは1になっています

SAMPLE 表示するスライド数の調整

1度にスライドする数の調整

『slidesToScroll』を設定すると1度にスライドする数の調整ができます。デフォルトは1になっています

『slidesToShow』と組み合わせると面白い動きを表現できます
※ スライドを増やしています

SAMPLE 1度にスライドする数の調整

adaptiveHeightで高さを可変させる

『adaptiveHeight』を設定するとスライドの高さに応じてスライダーの高さを可変させる事ができます。

少しわかりにくいのでドットを表示した状態で見比べるといいと思います。

SAMPLE 『adaptiveHeight』で高さを可変させる

『adaptiveHeight:true』設定したもの表示中のスライドの高さに合わせて可変する

『adaptiveHeight』なしの場合は一番高さがあるスライドの高さで固定されます

SAMPLE 『adaptiveHeight』なしの場合

センターモードを使う

『センターモード』を使うとスライドの両端に前後のスライドをチラ見せすることができます。

使う場合は『centerMode』のオプションを設定を「true」にします。

『centerPadding』はデフォルトで50pxが設定されているので、そのままでも使えますが、必要に応じて『centerPadding』でどれぐらいチラ見せするか値を文字列形式で単位を付けて指定する必要があります。

値を100pxにしたい場合は’100px’と記述します

SAMPLE 『センターモード』を使う

asNavForを使ってサムネイルと連動させる

少しコードが長くなりますが『asNavFor』のオプションを使うとサムネイルと連動したスライダーを実装することができます。

SAMPLE 『asNavFor』を使ってサムネイルと連動させる

同じスライドで2つ分のスライダーを作れるようにしていきます

それぞれのスライダーにslickの設定をしていきます

クラス『slider』はクラス「thumbnail」と連携させるために『asNavFor:’.thumbnail’』とオプションを追加し、自動再生と矢印を非表示にしました。

クラス『thumbnail』はクラス「slider」と連携させるために『asNavFor:’.slider’』とオプションを追加します。 他には、スライド5枚をすべて表示できるように「slidesToShow:3」とセンターモード用の「centerMode: true」を設定しておきます。

「focusOnSelect: true」はクリックしたスライドをアクティブにし、中央に寄せるようにできるオプションです。

あとはサムネイルのどれがアクティブになっているかを表現するためにcssを追加します。

画像の遅延読み込み

lazyLoadを設定すると画像の遅延読み込みを設定することができます。

  • ondemand:画像がスライドし始めたタイミングで画像を読み込む。
  • progressive:ページが読み込まれた後に非表示の画像を読み込む。

使う場合、img要素の書き方を変える必要があり、src属性を『data-lazy属性』に変更する必要があります

どちらの値も文字列として扱う必要がありますのでクォーテーションで囲んで使ってください。

ondemand
progressive

UI系のオプション

ユーザーの操作に関するオプションはデフォルトのままで充分だと思うので、使用頻度は高くはないとは思いますが、作るものや状況によって必要になってくるので押さえておきたいところです

これらのオプションはサンプルなしでも大丈夫だと思うので省いています

オプション名 デフォルト値 使える値や仕様
accessibility true 矢印キーでスライドの切り替えができる
※ falseでできなくなる
swipe true 横方向のスワイプやマウスカーソルのドラッグでスライド切り替えができる
※ 『vertical:true』が設定されていないとき有効
swipeToSlide false slidesToScrollを設定していてもユーザーがスライドを直接ドラッグまたはスワイプすることできるようになる設定
※ trueでできるようになる
verticalSwiping false 垂直方向のスワイプやマウスカーソルのドラッグでスライド切り替えができる
※ 『vertical:true』が設定されているとき有効
focusOnSelect false クリックやタッチしたスライドにフォーカスをさせるための設定
※ tureで有効にしていても、フォーカスされているスライドをクリック場合は意味がない
pauseOnHover true スライダー上にマウスカーソルが乗った時スライドの自動再生を一時停止するかどうかの設定
※ falseで止まらなくなる
pauseOnDotsHover true ドットインジケーター上にマウスカーソルが乗った時スライドの自動再生を一時停止するかどうかの設定
※ falseで止まらなくなる
pauseOnFocus true スライダーをフォーカスした時に自動再生を一時停止するかどうかの設定
※ falseで止まらなくなる
draggable true マウスカーソルでのドラッグでスライド切替えする設定
touchMove true タッチでスライドさせる
edgeFriction 0.15 infinite:false時にカルーセルの両端(スライドがない方向)をスワイプしたときの遊びを設定する値
※1でスライドの大きさと同じ、0.5でスライドの半分、0にすると一切動かなくなる
touchThreshold 5 マウスドラッグやスワイプでスライドを移動させるために必要な距離を指定する設定(1/指定した数値)
※ デフォルトだと5なのでスライドの1/5(20%)2にすると1/2なので(50%)スライドの半分までドラッグすると切り替わるようになる
waitForAnimate true スライドアニメーション中に別のスライドへのスライドを無効にする設定

レスポンシブ用のオプション

slickにはレスポンシブ対応用のオプションも用意されているのでウインドウ幅やスライダーの幅によってオプションを切り替えて表示することも可能になっています。

他のオプションと違って記述の方法が少し大変ですが必要に応じて設定できると役に立ちます

オプション名 デフォルト値 使える値や仕様
responsive none 値は配列形式で中にはオブジェクトを入れて使う。
オブジェクトの中には『breakpoint』と『settings』を入れてる
オブジェクトはカンマ区切りで複数指定可能
breakpoint ブレイクポイントを数値で指定するオプション
settings responsive内のオブジェクトで使う。
値はブレイクポイントに達したときに使いたいslickのオプションをオブジェクト形式でまとめる
respondTo window レスポンシブの判断基準となるものを文字列で設定
window→ウインドウを基準に
slider→スライダー本体を基準に
min→windowとsliderを比べて小さいほうを基準に
mobileFirst false breakpointの値をどう扱うかの設定
デフォルトのfalseはbreakpointに設定した値未満かどうかで判定
trueだとbreakpointに設定した値よりも大きいかで判定

responsiveを使う

説明が難しいのでコードを見てもらうのが一番だと思います

ここでは通常時はスライドを2枚表示しておいて、ウィンドウ幅が768px以下になった時にスライドを1枚にし、センターモードで表示するような設定をしています

SAMPLE 『responsive』を使う

以上になりますが長くなりすぎたのでページをばらばらにするかもしれません。
紹介しきれていないオプションは順次アップしていきます