返信
ヘッダー部分に設置するスライダーは従来一つのスライドが入れ替わるものが多いが、サイトによっては、いくつかのスライドを水平に並べて表示し、全体がスライドして入れ替わるものも見受けられる。ここでは、全体を８枚のスライドとし … 続きを読む
ページのヘッダー部分に表示するスライダーで、表示スライドの前後のスライドの部分を左右に表示するタイプで、スライド下部にサムネイルを水平に並べて、そのクリックでそのスライドに飛べるようにしたものを作成した。 画面サイズ … 続きを読む
これまで、サムネイルの数が５つの場合についてサンプルを作成してきた。もっとスライドの数が増えた場合（この例では10枚）の対処として、サムネイルが左右に移動して全部が現れるようにし、サムネイルのマウスオーバー時に、サムネ … 続きを読む
サムネイル画像が連なって円運動している状態で、水平になったサムネイル画像を拡大して、表示枠いっぱいに表示させるタイプのスライドショーである。 このサンプルでは、幅600pixの写真を表示させているが、他のサイズの写真をそ … 続きを読む
複数シリーズのサムネイル群を、ボタンクリックで切り替え、サムネイルのクリックで写真がFadeIn表示されるタイプのギャラリーである。先に、「複数シリーズ切換え型ギャラリー」で、切り替えるとサムネイルが流れ落ちるタイプを … 続きを読む
スライドショー、スライドの位置（順番）表示と移動を兼ねたボタン、左右送りボタンの機能を併せ持ったスライドショーで、スライド（画像）が、画面幅いっぱいに表示されるタイプのスライダーである。スライドは、画面サイズに応じてス … 続きを読む
サムネイルクリック型のフォトギャラリーで、いわゆる、3D WALL 型などと呼ばれているタイプのフォトギャラリーである。サムネイルが、奥まった中央のサムネイルに、両側から遠近感をもってサムネイルが近づいていくように見え … 続きを読む
先にカバーフロー型スライドショーを別ページに投稿したが、本稿は、左右移動ボタンを追加したスライダーの作成である。基本的には、前項のスクリプトを踏襲しているが、スライダーの性格上横長（一般的に多い幅960px）のステージ … 続きを読む
格子状に配置されたサムネイルをロールオーバーすると、マウスがのったサムネイルが拡大し、その他のサムネイルが縮んで全体の格子の幅・高さは変わらないという効果を持つサムネイルクリック型のフォトギャラリーである。拡大したサム … 続きを読む
ユニクロやミズノのサイトなどなど、トップページの上部に表示されているスライダーをよく目にする。おそらくjQueryなどのjavascriptで作成されていると思われるが、これを、本稿では純CSS（pure CSS）で作 … 続きを読む