slick.jsのオプション設定を動的に行なうには？

Question

slick.jsで月別のカレンダーをスライド表示させています。
数カ月分のカレンダー（例えば5,6,7,8,9月分など）がHTML上に記載されているとして、
現在月に該当するカレンダーをスライド表示の初期値に設定したいのですが、
slick.jsのオプション initialSlide の値を動的セットする方法が分かりません。

##できていること
・現在の日時から月の値を取得
・何月分のカレンダーが掲載されているかを配列に格納
・現在月に該当する値が配列の何番目にあるのかを取得

##できないこと
slick.jsのオプション設定であるinitialSlideに、動的に取得した配列番号を
設定しようとしたが、単純に変数を書いただけでは動かなかった。

##現在のコード

function slideHuck01(){
  var w = $(window).width();
  var size = 639;
  var i = new Date();
  var month = i.getMonth()+1;
  var calArray = [5,6,7,8,9];
  var num = $.inArray(month, calArray);

  if (w <= size) {
	$(".jy-calendar").slick({
		initialSlide: num //ここに動的な値をセットしたい
	});
  } else {
	$(".jy-calendar").unslick();	
  }
}
slideHuck01();

プラグインの挙動の中に独自の変数を割りこませる必要があるので、今のように単純に変数名を当てただけではダメなんだろうな、ということはなんとなくわかるのですが、では具体的にどうしたら動的な値を渡すことができるのか見当もつかないといった状況です。。。

Slick.js公式にある「Method」とか「Event」あたりの仕組みを活用する必要がありそうな気もしていますが、公式に乗っているあの情報だけでは具体的にどうコードを書けば良いのか分からないので手が出せていません。

どなたかご教授いただけますと助かります。
よろしくお願い申し上げます。

Answer 1

書いていただいたコードをコピペしました（HTMLはテキトーです）。

https://jsfiddle.net/vfmb7j7r/

ロード時に画面幅が640px未満の時、目的通り当月（回答記述時で9月）のカレンダーの位置に移動しています。
Google Chrome、Firefox、Safariで確認しました。

わたしには動いているように見えるのですが、aKusanoさんが動かなった時の状況の詳しい説明が欲しいです。
こちらで認識がもれている要件があるかもしれません。

レスポンシブウェブデザインなサイトで、640pxを境にslickを適用したりさせなかったりしたいとなると、別のロジックが必要です。

いったんご確認いただければと思います。

Comments

[aKusano]

o_tiさん

ご回答有り難うございます。

>>レスポンシブウェブデザインなサイトで、640pxを境にslickを適用したりさせなかったりしたいとなると、別のロジックが必要です。

現状、640px以上ではslick解除、640px未満の時にはslick適用となっています。
知人から「幅を変えた際に slick の呼び出しがされていないためではないか」と指摘を受け、関数の呼び出し方法を教えてもらった以下の形に変更した所無事動作するようにになりました。

$(window).on('resize', slideHuck01).trigger('resize');

変数の受け渡しが出来ていないのではなく、slick自体の呼び出しがうまくいっていないのが原因だったようです。お騒がせ致しました。

ちなみにこちらのカレンダー表示機能はまだ他にもクリアしないといけないハードルがたくさんありますので、別の質門を立てさせていただくかもしれません。
もし機会がありましたらその際もよろしくお願い申し上げます。