【jQuery】ゆっくり流れる無限ループスライダー(逆向きも)

昔、下の記事でSlick.jsを使った無限ループスライダーの実装方法を紹介しましたが、

この記事の方法はちょっと苦しいので、プラグインなしで実装する方法も紹介しています! ↓ ゆっくり流れる無限ループスライダー(逆方向も) ...

いろいろ問題があるうえ逆向き(左から右)ができないということで、今回はプラグインなしでjQuery+CSSで実装する方法を紹介します。

こんな感じになります↓

それでは実装してみましょう。




html

jQuery

グループ一つではループできないので、jQueryで3つに分身させます

CSS

CSS Animationを使って動かします。
まずは、全てを横並びにしましょう。

続いてアニメーションの部分。

右から左

2つめと3つめのグループのdulationを、speedの-1/3、-2/3にするのがポイント。

左から右

地味に需要があるかもしれない!最初ちょっと崩れるかもなぁってときは、ローディング画面にするか透明にしとくか、適当に隠しておきましょう。
現場からは以上です。

おもしろかったらシェアしてね!

twitterフォローしてね!