jQueryを使ってのスライドギャラリーはいろいろあり、ここでもたくさん紹介していますが、
ギャラリー要素を単純にスライドして切り替えるのではなく、
さまざまなパターンのアニメーションを使って切り替わりを演出することが可能となる
「Nivo Slider」が何かに使えそうだったのでご紹介。

Nivo Slider – The Most Awesome jQuery Image Slider
DEMO:Nivo Slider Demos

オートスライドに加えて、マウスオーバーで「NEXT」「BACK」のボタンも表示。
任意の画像へ遷移できるサムネイルボタンも用意されているので
スライドギャラリーとしての最低限の要素は盛りこんであるように思います。

サムネイル実装画面はこんな感じに。

With Thumbnails

切り替えアニメーションのパターンは
————————————–
・sliceDown
・sliceDownLeft
・sliceUp
・sliceUpLeft
・sliceUpDown
・sliceUpDownLeft
・fold
・fade
・random
————————————–
と9種類。

紹介ページに組み込みのチュートリアルも用意されているので
簡単に実装することが出来そうです。

このプラグインファイルを参考にして
スライス切り替えアニメーションも試してみたいところ。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

スライスアニメーションがかっこいいjQueryスライドギャラリー「Nivo Slider」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner