tyosbbヘッダー部分に設置するスライダーは従来一つのスライドが入れ替わるものが多いが、サイトによっては、いくつかのスライドを水平に並べて表示し、全体がスライドして入れ替わるものも見受けられる。ここでは、全体を8枚のスライドとし、その内5枚のスライドを標示するタイプのものについて作成した。それぞれの枚数については、作成するサイトに応じて決めればよく、このサンプルを応用して頂ければと思う。オールインワン型にすると、CSSの記述がかなり煩雑になるのと、この種のスライダーの場合そこまでしなくても実用上十分と思い、以下の二通りのスライダーを作成した。(1)全体を左右に送るための送りボタン付き、および、位置を表示するバー付き(スライドショー無し)(2)スライドショー、位置表示ボタン付き(左右送りボタン無し)ただし、(2)の場合、位置表示ボタンをクリックしたとき移動する際のanimationが、Ie、Edgsの場合は思い通り作動するが、Firefox、Chromeの場合アクション無しとなってしまう。後者の場合は、transitionとanimationの共存がうまくいかないようだ。サンプル(DEMO)以下のページに二通りのサンプルを、表示用のHTMLとCSSとともに示した。(1)送りボタン、位置表示ボタン付き(2)スライドショー、位置表示ボタン付きHTMLとCSSの説明DEMOページのコードの中のコメント書きを参考のこと。コメントをキャンセルメールアドレスが公開されることはありません。フォトギャラリー・スライドショ。