2021.06.18

jQueryプラグイン「slick」を使用した無限ループスライダー

Web制作においてスライダーを使用することはよくありますが、たまに止まることなくゆっくりと流れるスライダーを実装することがあります。

これまでjQueryプラグイン「infiniteSlide.js」を使用した制作をしていましたが、jQueryプラグインとしてよく使う「slick」でも実装可能だということが分かりましたのでここに書き留めておきます。

ここではあえて「slick」についての概要や設置については説明しません。
英語ではありますが、説明や各種設定内容は「slick」のサイトをご覧ください。

HTMLマークアップ

<div class="slider">
  <div class="img"><img src="img01.jpg" alt=""></div>
  <div class="img"><img src="img02.jpg" alt=""></div>
  <div class="img"><img src="img03.jpg" alt=""></div>
  <div class="img"><img src="img04.jpg" alt=""></div>
</div>

jQueryコード

<script>
$(function () {
  $('.slider').slick({
    autoplay: true, //自動スクロール
    autoplaySpeed: 0, //自動再生時のスライド切り替えの時間
    speed: 5000, //スライドが流れるスピード
    arrows: false, //左右の矢印を非表示
    swipe: false, //スワイプ禁止
    slidesToShow: 4, //表示するスライドの数
    cssEase: 'linear', //画像切り替えのアニメーション"linearは等速"
    pauseOnFocus: false, //フォーカスしても止めない
    pauseOnHover: false, //マウスホバーしても止めない
  });
});
</script>

今回の設定で重要なのは以下の点です。

autoplaySpeed
通常はスライダーが切り替わって、次に動き出すまでの時間を設定します。今回は無限ループなのでここを0に設定します。
cssEase
通常のスライダー設定ではデフォルトで”ease”になっていてあまり変更することはありませんが、今回は一定のスピードでループさせたいので等速のアニメーション設定linearに変更します。

完成形

See the Pen slick infinite loop by TAKAMI DESIGN (@takami_design) on CodePen.

ループを逆向きにする場合

HTMLマークアップ

スライドさせる要素、今回で言えば「slider」のclassを設定した場所に、属性「dir」を「rtl」に設定します。

<div class="slider" dir="rtl">
  <div class="img"><img src="img01.jpg" alt=""></div>
  <div class="img"><img src="img02.jpg" alt=""></div>
  <div class="img"><img src="img03.jpg" alt=""></div>
  <div class="img"><img src="img04.jpg" alt=""></div>
</div>

jQueryコード

次に、jQueryコードにも逆向きの設定を追加します。

<script>
$(function () {
  $('.slider').slick({
    autoplay: true, //自動スクロール
    autoplaySpeed: 0, //自動再生時のスライド切り替えの時間
    speed: 5000, //スライドが流れるスピード
    arrows: false, //左右の矢印を非表示
    swipe: false, //スワイプ禁止
    slidesToShow: 4, //表示するスライドの数
    cssEase: 'linear', //画像切り替えのアニメーション"linearは等速"
    pauseOnFocus: false, //フォーカスしても止めない
    pauseOnHover: false, //マウスホバーしても止めない
    rtl: true //逆向きを有効（true）にする
  });
});
</script>