[slick.js]breakpointの書き方

要点だけ。

サンプル

$(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を指定してみる。

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

https://tr.you84815.space/slick/settings/respondTo.html

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

respondTo: 'slider'

コメント

タイトルとURLをコピーしました