jQueryを使ってある階層にあるimgを順番に標示するシンプルなスライダーを作る

とある案件でスライダー実装が必要になったが、ネット上には何かとアニメーション盛り盛りのスライダーしか転がっていなかったので自分で作ることにした。

要件

  • あるdivで囲んだ階層の中にある<img>に入っている画像を順番に標示する。
  • 画像の数は増えたり減ったりする。
  • 矢印を押すと写真が切り替わり、最後の写真まで行くと最初に戻る。
  • アニメーションは必要なし、ボタンをおすとパッと切り替わる。

ただ写真が切り替わるだけというのであればCSSで実装したかったが最後の写真から最初の写真に移る動作はどうしても実現できなく…(血涙)

結局jQueryに頼りました。

完成物

要するにimgの数を取得して、矢印部分がクリックされると表示したい画像に「displayOn」というクラスを付与してあとはCSSで制御している感じです。

CSSまで載せたかったのですが、時間がないので今回はここまで。暇があればデモページとか作ります。

Social Share Button