jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」:phpspot開発日誌
少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」が公開されています。 小さな枠を３分割させてページをスライドさせるなど動きとしてもおもしろいコンテンツスクローラーになっています。 少ないスペースに色々なコンテンツを置くような場合に参考にできそうです。 デモページを見るとその凄さが分かる筈。 jQueryなので次のように実装も超簡単です。 $('#flips1').flips( { autorun_delay:0, direction: 'left' } ); 詳細・ダウンロードは以下のページを参照してください。 FLIPS | jQuery Plugins
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
