【 jQuery】レスポンシブに対応した無限ループスライダー
レスポンシブに対応した簡易の無限ループスライダーが欲しかったのですが、意外と使えそうなサンプルコードが見つからなかったので、勉強かつ調査を兼ねて実装してみました。leftやrightをsetIntervalで回してDOMをアニメーションさせる旧来の方法でなく、今らしくtransformを使ったアニメーションで実装しています。
See the Pen Infinite Loop Block (Responsive) by Shinichi Kogiso (@kgsi) on CodePen.
使用ライブラリ
- jQuery
- TweenMax(Timeline)
実装ポイント
- 動的にスライドブロックの数を取得して、合計の横幅がWindowの横幅に満たない場合は、自動的に複製(clone)して画面が見きれないように調整。
- スライドしたいエリアが規定値に満たない時のみスライドアニメーションの初期化を実行している。
- TweenMaxの初期化はpauseとremoveで行う。