エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
jQueryで作る画像ギャラリーのチュートリアル (3/3)
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
jQueryで作る画像ギャラリーのチュートリアル (3/3)
スライド付きギャラリーに改良、画像の追加に対応する アニメーションエフェクトを追加したことでだいぶ... スライド付きギャラリーに改良、画像の追加に対応する アニメーションエフェクトを追加したことでだいぶ見栄えのいい画像ギャラリーになりましたが、まだ改良の余地があります。現状ではサムネイル画像を増やしたい場合に、表示するスペースがないのです。そこで、サムネイル部分をいくつかのブロックに区切り、ナビゲーションボタンの操作に応じて各ブロックを横にスライドして切り換えるように改良しましょう。これなら、ページを遷移させずに画像の追加に対応できます。 まずHTMLを以下のように変更します。1度に表示するul要素(1ブロック)ごとに、「page」というclass属性を付けたdiv要素で包みます。最初の div.pageには「次へ」ボタンを、最後のdiv.page には「前へ」ボタンを配置し、間の div.page には「次へ」「前へ」ボタンの両方を配置します。「次へ」ボタンのimg要素のclass属性には