jQueryスライダー「slick.js」による無限ループの設定方法

jQueryスライダー「slick.js」の実装編では基本的な方法を説明しましたが、今回はWeb制作でもよく使用する無限ループするスライダーの設定方法をご紹介します。

無限ループするスライダーというと「infiniteslide.js」というjQueryプラグインもありますが、複数のjQueryを使用するよりなるべく少ない読み込みの方がよいので、これまでにご紹介したslick.jsで実装していきます。

slick.jsによる無限ループ実装例

HTMLJS

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

$(function() {
  $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 5000,
    arrows: false,
    swipe: false,
    slidesToShow: 4,
    cssEase: 'linear',
    pauseOnFocus: false,
    pauseOnHover: false
  });
});

HTMLは通常のslick.jsの設置と変わりないコードで問題ありません。
それでは、今回の無限ループに関する主な設定項目を見ていきましょう。

autoplaySpeed: 0

これはスライド再生時に次のスライドが動き出すまでのインターバルの時間設定です。通常であればデフォルトで3000となっていますので3秒のインターバルがあります。

今回の無限ループでは次のスライドまでのインターバルがないので0を設定します。

swipe: false

これはスワイプを有効にするかというものですが、無効に設定しておくことで一時的に止めることなくスムーズに流れるスライダーとなります。

cssEase: ‘linear’

これはCSS3アニメーションのイージング設定ですが、今回の設定では一定のスピードでループさせたいのでlinearを設定しておきます。ちなみに、cccEaseには以下のような設定があります。

ease：開始と終了が緩やかに変化
linear：開始から終了まで一定に変化
ease-in：開始は緩やかに変化、終了に近づくと早く変化
ease-out：開始は早く変化、終了に近づくと緩やかに変化
ease-in-out：開始と終了は緩やかに変化

pauseOnFocus: false

これはスライダーをフォーカスした時にスライダーを一時停止するものですが、今回の設定では流れ続けるスライダーなので無効にしておきましょう。

pauseOnHover: false

これはpauseOnFocusと似たような設定で、スライダーにマウスを乗せるとスライダーを一時停止するものですが、こちらも同様に無効にしておきましょう。

ループの方向を逆にする場合

HTMLJS

<div class="slider_rtl" dir="rtl">
  <div class="item"><img src="img01.jpg"></div>
  <div class="item"><img src="img02.jpg"></div>
  <div class="item"><img src="img03.jpg"></div>
  <div class="item"><img src="img04.jpg"></div>
  <div class="item"><img src="img05.jpg"></div>
  <div class="item"><img src="img06.jpg"></div>
</div>

$(function() {
  $('.slider_rtl').slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 5000,
    arrows: false,
    swipe: false,
    slidesToShow: 3,
    cssEase: 'linear',
    pauseOnFocus: false,
    pauseOnHover: false,
    rtl: true
  });
});

ループの方向を逆にするにはHTMLマークアップでは、スライダーさせたい要素class="slider_rtl"の箇所にdir="rtl"を追記します。
また、jQueryコードにはスライダーが逆方向になるrtl: trueを追記します。