2016年5月4日水曜日

レスポンシブデザインに対応したカルーセル「slick」

レスポンシブデザインに対応したカルーセル「slick」を設定してみました。画面サイズに合わせて設定が変えられます。なかなか快適。

$("#calendarslider").slick({
  infinite: true,
  dots: true,
  speed: 1000,
  autoplay: true,
  autoplaySpeed: 6000,
  responsive: [{
      breakpoint: 1024,
      settings: {slidesToShow: 3}  // 3枚表示
    }, {
      breakpoint: 600,
      settings: {slidesToShow: 2}  // 2枚表示
    }, {
      breakpoint: 300,
      settings: "unslick" // 非表示
    }]
});

0 件のコメント:

コメントを投稿