最近では表題のような、画像移動式アニメーションで無限ループを実装する場合、jQueryではなくcssのアニメーションで実装する方がスマートかもしれません。
ただし今回は、何かしらの理由によりcssアニメーションを使わず、jQueryで実装したい場合の方法をご紹介します。
有名なスライダー（カルーセル）プラグインを使うと、一枚一枚の画像が「スッ、スッ」と動きます。
ただし今回はこの「スッ、スッ」という動作ではなく「スゥ～～～」とゆっくりと動き続ける動作を実装します。
擬音ではわかりにくいので実際に動きを見ていただきましょう。
■「スッ、スッ」版のスライダー
■「スゥ～～～」版のスライダー
これらは両方とも同じjQueryプラグインを利用しています。「slick」というプラグインで、実にシンプルかつ融通の利くスライダーです。
スライダーのプラグインは数多くありますが、古いものや機能が不十分のものも多くあり、思うように動作しませんでした。
中には「Uncaught RangeError: Maximum call stack size exceeded」というエラーが出てしまい動作が止まってしまうものも。
これは「関数呼びすぎ！」的なエラーだそうで、処理が重く、停止してしまう場合も多々あります。
無限ループを実装するslickの使い方
さぁお待たせしました。
上の二つの例を実装するslickのオプションは下記の通りです。
slick自体の使い方は、本家のサイト（英語）や他のブログ等（日本語）で紹介されておりますのでここでは割愛します。
$('#slide-div1').slick({
arrows: false,
autoplay: true,
slidesToShow: 7,
slidesToScroll: 1,
});
$('#slide-div2').slick({
arrows: false,
autoplay: true,
/* ポイントここから～ */
autoplaySpeed: 0,
cssEase: 'linear',
speed: 5000,
/* ～ここまで */
slidesToShow: 7,
slidesToScroll: 1,
});
ポイントを順を追ってご説明しましょう。
最初のポイントはまず「autoplaySpeed」を0にすること。
このオプションは自動スライドで「次の画像にスライドするまでの時間」です。つまり「スッ、スッ」という動きの「スッ」と「スッ」の間の時間です。
この時間を０秒にすることで「スッスッスッ」と動くわけです。
次なるポイントは「cssEase:’linear’」です。
このオプションでスライドの動作（アニメーション）を指定します。「linear」という波のないアクションを指定することで「スッスッスッ」を「ス～ス～ス～」に変更します。
最後のポイントは「speed」です。この例では5000、つまり５秒を指定していますがこちらは好みです。
速さが「ス～ス～ス～」なのか「スースースー」なのか「スゥスゥスゥゥゥ！！」なのかはこの数字次第です。
今回は擬音をたくさん駆使して説明してみましたがお分かりいただけたでしょうか。
百聞は一見に如かずと言いますので、ぜひ実装していろいろいじってみてください。
