Web Design

作品の解説

両サイドにあるNext・Prevボタンを押すとグループでまとめた写真が切り替わります。

ポイント個所

• パネル全体を格納する#carouselInnerに全体の横幅をjQueryで設定しています。
• NextボタンはjQueryでCSSを追加し、ネガティブマージンで1グループ分の横幅をスライドさせてずらしています。 Prevボタンは逆にマージンを足すことで戻ることができるように設定しています。
• Nextボタン･Prevボタンは.hide();で処理中は操作ができないように設定しています。

使用ソフト

photoshopCS5

備考

IEでも動作の確認ができます。