[slick.js]breakpoint切り替え時の不調対処法

毎度びびるんだけどさ。

動作環境
以前書いた内容で済む
壊れるタイミング
再読み込み（初期化）する
breakpointの記述ミスの可能性

動作環境

jquery.js 3.6.3

slick.js 1.8.1

以前書いた内容で済む

アプローチが違うだけでやることは同じ。

壊れるタイミング

breakpointで指定した数値を跨いだときにスライドがおかしいとか動作がおかしいとか、自分が触る中では割りと珍しくない。

横にスライドするものを仕込んで幅をいじったら、次回のスクロールタイミングにならないと表示内容がリフレッシュされないとかそういうのがある。つまり、切り替わるタイミングはslickの動作に準拠するしslickは常時動いているわけじゃないということが分かる。

それでいてautoplaySpeedを0にして常時動いてるものを作ったら、それはそれでbreakpointが上手いこといかない（多分、スライドの中身を並べてる要素の位置指定のアレと表示されてる位置がずれて一応ずっと動きはしてるから誤差の帳尻を合わせるまでは待たなきゃいけない的なやつかなと思う）。

で、待ってる間は変なことになって都合が悪いのでどうにかならないかということ。

再読み込み（初期化）する

リフレッシュするしかないでしょう。というか、それが早い。

$(window).on('resize', function(){
    $('.slick').slick('setPosition');
})

これをそのまま使うとリサイズしたら常時反応する。流石にそれはやりすぎなので、breakpointに合わせて発火するように調整した方がいい。

breakpointの記述ミスの可能性

そもそものところでやらかしてる場合もあるので一応チェックしておいた方がいい。

$('.slick').slick({
    ︙
    responsive: [{
        breakpoint: 1023.98,
        settings: {
            ︙
        }
    },{
        breakpoint: 767.98,
        settings: {
            ︙
        }
    }]
});

cssと違ってbreakpointに書いた内容は他のbreakpointに引き継がれない。

ベースとして書いた内容と指定したbreakpointの組み合わせが反映されるだけなんで、中くらいのサイズ用の内容が小さいサイズ用に掛かるということはないし、その逆もない。

バグった！と思ったらそもそも書いてませんでしたというケースもある。

cssの感覚でやると失敗するので注意。