[slick.js]breakpointの書き方

要点だけ。

サンプル
メモ
respondTo

サンプル

$(function(){
    $('#Slider').slick({
        arrows: false,
        dots: false,
        speed: 2000,
        autoplaySpeed: 2000,
        autoplay: true,
        swipe: false,
        pauseOnHover: false,
        variableWidth: true,
        responsive: [{
            breakpoint: 767.98,
            settings:{
                swipe: true,
                variableWidth: false,
                slidesToShow: 2,
                centerMode: true,
            }
        },{
            breakpoint: 360,
            settings:{
                swipe: true,
                variableWidth: false,
                slidesToShow: 1,
                centerMode: true,
            }
        }]
    });
})

メモ

breakpointは小数点に対応してるくさい（多分）。
optionはsettings:{}の中に書いていく。
breakpointを複数書く場合は[{},{}]の形で繋ぐ。
breakpointは数値の大きい順に書く。
breakpoint内で書いた内容は他のサイズに重複しないので、同じ動作であってもそれぞれに書く。

respondTo

レスポンシブの動作がなんかおかしいと思ったらrespondToを指定してみる。

幅の判定元を画面（ブラウザ）にするか、スライド領域にするか、ってやつ。

respondTo | slick - にほんご。

個人的にこの設定と相性のいい組み方の時が多い。

respondTo: 'slider'