slick.jsスライダーでウインドウサイズを変更したとき、スライド画像のサイドの幅のみ変更したい。

Question

前提・実現したいこと

slick.jsスライダーでセンター画像が大きく見えて、両側のサイドの画像が少し見えているというパターンを制作しています。

ブラウザのウインドウ幅を変更したときに、1200px以上のときはセンター画像の横幅を変更せず、サイドに見えている部分を縮小していきたいのです。
そこで、下記のようなコードを書いてみたところ、最初にロードされたときはうまく表示できます。
これをウインドウの幅をリサイズしたときに、リアルタイムで常にサイドの幅が減っていくというコードがわかりません。

図にて説明します。

該当のソースコード

<div class="slide "><!-- スライド -->
	<div><a href="#"><img src="images/slide1.jpg" alt=""></a></div>
	<div><a href="#"><img src="images/slide2.jpg" alt=""></a></div>
	<div><a href="#"><img src="images/slide3.jpg" alt=""></a></div>
</div>

$(function() {

	var windowWidth = $(window).width();
	var centerPadding_W =windowWidth/2-600;

	jQuery('.slide').slick({
		infinite: true,
		dots:true,
		slidesToShow: 1,
        	slidesToScroll: 1,
		centerMode: true,
		centerPadding: centerPadding_W+"px",//両サイドの見えている部分のサイズ
		autoplay:true, 
		responsive: [{
      		breakpoint: 1200,
      		settings: {
		centerPadding:'10%'
      		}
    		}]
	});
});

やってみたこと

$(window).resize(function(){
    var windowWidth = $(window).width();
	var x = 1200;
	if (windowWidth >= x) {		
	var centerPadding_W =　windowWidth/2-600; //centerPadding_Width
	}else{
	var centerPadding_W = 0;	
	}	
});	

これだと、ローカル値でslickのパラメーターにcenterPadding_Wが渡せません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

slickSetOption で設定してみては。

【slickSetOption | slick - にほんご。】
https://tr.you84815.space/slick/methods/slickSetOption.html

Comments

[tyuuta]

ありがとうございます。
responsiveのオプションだと、各ウインドウ幅で対応できるとは思いますが、
やりたいことは、ブラウザの幅を取得し、そこから計算して得られた値（px)分をcenterPaddingに幅にしたいのです。
そして、ブラウザの幅を変更したときにでもリアルタイムで変更できるように設定したいのですが、
slickSetOption で設定する方法あるのでしょうか。

[kei344]

何をどう試して、何が出来なかったのでしょう。

[tyuuta]

responsive: [{
breakpoint: 2400,
settings: {
centerPadding:'600px'
}
breakpoint: 2300,
settings: {
centerPadding:'550px'
}
breakpoint: 2200,
settings: {
centerPadding:'500px'
}
・
・
・

}]
原始的ですが、上記みたいな形では設定できると思うのですが。
centerPaddingの値をなんとかしたいのです。

var windowWidth = $(window).width();
var centerPadding_W = windowWidth/2-600;

これでブラウザのウインドウ幅が取得でき、
centerPadding: centerPadding_W+"px"
で、幅が取得でき、とりあえず動作はします。

ただ、ウインドウ幅を変更するとずれます。
リアルタイムの取得ではないので当然なのですが・・・

リアルタイムで取得した値からcenterPadding_Wを取得したいのですが、どうすれば良いのかわかりません。
やりたい事をわかりやすくする為に図を挿入しました。

[kei344]

＞リアルタイムで取得した値からcenterPadding_Wを取得したいのですが
resizeイベントの処理で採れているのでは？
そこで値を変えるのにslickSetOption を試せば？という回答だったのですが･･･。

[tyuuta]

>resizeイベントの処理で採れているのでは？
>そこで値を変えるのにslickSetOption を試せば？

そういう事だったのですね、ようやく理解できました。
resizeイベントの処理に

$('.slide').slick('slickSetOption', 'centerPadding', centerPadding_W+"px", true);
と追加することで、パラメーター変更でリロードできるんですね。
勉強になりました。

centerPaddingの値は「slickSetOption」の場合も　+"px"としなければpx指定できない事に気づかず、１日費やしてしまいました。
ありがとうございました。