【簡単】slick.jsで無限ループスライダー

ホームページ上にスライドショーを実装するとき、いつもお世話になっているslick.jsで、画像がずっと流れ続ける無限ループスライダーを実装。

実装

ソースは以下

$('#slider').slick({
  slidesToShow: 5,
  centerMode: true,
  arrows: false,
  autoplay: true,
  autoplaySpeed: 0, //待ち時間を０に
  speed: 10000, // スピードをゆっくり
  swipe: false, // 操作による切り替えはさせない
  cssEase: 'linear', // 切り替えイージングを'linear'に
  // 以下、操作後に止まってしまう仕様の対策
  pauseOnFocus: false,
  pauseOnHover: false,
  pauseOnDotsHover: false,

  // 以下、レスポンシブ
  responsive: [
    {
      breakpoint: 750,
      settings: {
        slidesToShow: 3,
      }
    }
  ]
});

要するに、「常に均等なスピードでゆっくり動いていれば」それっぽい感じになるので、

といった設定をしてやればＯＫ。

ちょっとガタつくかなーと思ったら、

slidesToScroll: 5

とかで一気に動かしてやると、いい感じになる。

現場からは以上です。