ヘッダー部分に設置するスライダーは従来一つのスライドが入れ替わるものが多いが、サイトによっては、いくつかのスライドを水平に並べて表示し、全体がスライドして入れ替わるものも見受けられる。ここでは、全体を８枚のスライドとし、その内５枚のスライドを標示するタイプのものについて作成した。それぞれの枚数については、作成するサイトに応じて決めればよく、このサンプルを応用して頂ければと思う。
　オールインワン型にすると、CSSの記述がかなり煩雑になるのと、この種のスライダーの場合そこまでしなくても実用上十分と思い、以下の二通りのスライダーを作成した。
　（１）全体を左右に送るための送りボタン付き、および、位置を表示するバー付き（スライドショー無し）
　（２）スライドショー、位置表示ボタン付き（左右送りボタン無し）
　ただし、（２）の場合、位置表示ボタンをクリックしたとき移動する際のanimationが、Ie、Edgsの場合は思い通り作動するが、Firefox、Chromeの場合アクション無しとなってしまう。後者の場合は、transitionとanimationの共存がうまくいかないようだ。

サンプル（DEMO）

　以下のページに二通りのサンプルを、表示用のHTMLとCSSとともに示した。
　（１）送りボタン、位置表示ボタン付き
　（２）スライドショー、位置表示ボタン付き

HTMLとCSSの説明

　DEMOページのコードの中のコメント書きを参考のこと。