[slick.js]一定幅以下で無効化、一定幅以上で有効化するギミック

レスポンシブ。

どういうアレか
こうする

どういうアレか

slick.jsでスライドを設置。

PC閲覧時はスライドを表示、スマホ表示時はスライドを非表示。ブラウザ幅により判定・切り替えるものとする。

スライド自体よりもスライドに付随するサムネのオンオフのが現実的なところかも。

端的にdisplay:none;を付与するとスライドが壊れるのでダメ、という点を踏まえてやっていく。

こうする

まずスライドを用意。

<div id="slick_slider">
    <div class="slide">...</div>
    ︙
</div>

cssをこう。

@media screen and (max-width:768px) {
    #slick_slider{
        display:none;
    }
}

cssの指定する幅に合わせてjsをこう。

$(function(){
    $('#slick_slider').slick({
        responsive: [{
            breakpoint: 768,
            settings: "unslick",
        }]
    });
    $(window).on('resize orientationchange', function(){
        $('#slick_slider').slick('resize');
    });
}

cssでは相変わらず非表示の切り替えをして、それに合わせてjs側ではslickを無効化。幅準拠の切り替えなので、リサイズをトリガーにして判定、.slick()を発火させるので、幅が指定以上だったら動作する。

念のためだけど、幅を変えるたびに.slick()が発火するわけではないので、ブラウザのリサイズによりスライドがリセットされることはない。だけども発火するとリセットされる。ということで、スライドを2個作って片方をサムネにして連動、サムネの表示を切り替えるようにした場合はこの発火によりスライド位置はリセットされる。