aircolor memolog

Web制作・テクノロジー、たまに旅行記

【 jQuery】レスポンシブに対応した無限ループスライダー

レスポンシブに対応した簡易の無限ループスライダーが欲しかったのですが、意外と使えそうなサンプルコードが見つからなかったので、勉強かつ調査を兼ねて実装してみました。leftやrightをsetIntervalで回してDOMをアニメーションさせる旧来の方法でなく、今らしくtransformを使ったアニメーションで実装しています。

See the Pen Infinite Loop Block (Responsive) by Shinichi Kogiso (@kgsi) on CodePen.

使用ライブラリ

実装ポイント

  • 動的にスライドブロックの数を取得して、合計の横幅がWindowの横幅に満たない場合は、自動的に複製(clone)して画面が見きれないように調整。
  • スライドしたいエリアが規定値に満たない時のみスライドアニメーションの初期化を実行している。
  • TweenMaxの初期化はpauseとremoveで行う。

参考にした記事

black-flag.net