slick slider：自動ループで流れるようなスライダーをつくる

下のように滑らかに流れるようなスライダーの実装方法です。

実装方法

スライダー系プラグインの定番、slick sliderを使用しました。
optionを調整することで意外にも簡単に実装できました。

下記のリンクからダウンロードできます（お試しならCDNでも）
公式：http://kenwheeler.github.io/slick/

HTML

slick sliderのcssとjs、jQueryを読み込みます。
スライダーのクラス名は適当に。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="slick/slick.css"/>
  <link rel="stylesheet" href="slick/slick-theme.css"/>
  <link rel="stylesheet" href="./style.css"/>    
</head>
<body>
  <main>
    <div class="your-class">
      <div><img src="https://picsum.photos/id/20/500/500" alt=""></div>
      <div><img src="https://picsum.photos/id/21/500/500" alt=""></div>
      <div><img src="https://picsum.photos/id/22/500/500" alt=""></div>
      <div><img src="https://picsum.photos/id/23/500/500" alt=""></div>
      <div><img src="https://picsum.photos/id/24/500/500" alt=""></div>
      <div><img src="https://picsum.photos/id/25/500/500" alt=""></div>
    </div>
  </main>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>

css

スライダーに使用するimgはwidth : 100% をかけておかないと見切れてしまうので指定。

  img{
    width: 100%;
  }

javascript

今回は下記のオプションを設定。

  $(document).ready(function(){
  $('.your-class').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 0,
    speed: 2000,
    arrow: false,
    cssEase: 'linear',
    infinite: true,
  });
});

ポイントはautoplaySpeedとcssEaseでした。

autoplaySpeedを0に設定することで、次のスライドに移るまでの待機時間がなくなります。

しかしそれだけでは、次のスライドに移るときにカクついた（緩急のついた）動きになってしまうので、cssEaseをlinearに設定してあげると綺麗に流れるようになります。

今回使用したオプション一覧

option	役割
slidesToShow	一度に表示する画像の数（default : 1）
slidesToScroll	一度にスライドする画像の数（default : 1）
autoplay	自動再生（default : false）
autoplaySpeed	自動再生速度（default : 3000）
speed	スライドのアニメーションの速度（default : 300）
arrow	前後のスライドへの矢印表示（default : true）
cssEase	スライドアニメーションへ適用するeasingの指定（default : ‘ease’）
infinite	無限ループ（default : true）

■参考

http://kenwheeler.github.io/slick/