ページのヘッダー部分に表示するスライダーで、表示スライドの前後のスライドの部分を左右に表示するタイプで、スライド下部にサムネイルを水平に並べて、そのクリックでそのスライドに飛べるようにしたものを作成した。
画面サイズに従って、全体を収縮して表示できるようにしたが、タブレット以下の端末用には、中央スライドの部分の比率を上げた方がいいと思うが、今回はそこまでには対応していない。また、中央部分はフルサイズ表示で標準的な1000px強に設定したが、.photoの54%を調整してそのサイズを変更することができる。ただしその場合は、@keyframes内の、leftの値の調整も必要である。
なお、コメントで要望のあった、スライドショー無し版を作成し、以下のページに掲載した。
スライダー（サムネイル付き・スライドショー無し）
サンプル（DEMO）
別ページに、本サンプル表示用HTML、CSSとともに示した。
準備したもの
・サイズ1150*368pxのjpg写真6枚、サイズ250*90の該当サムネイル写真6枚を、ここでは、フォルダimg13に格納した
・順送りボタン、forward_1.png, back_1.pngと、hover時に表示する色違いの、forward_2.png, back_2.pngを、ここでは、フォルダimagesに格納した
・表示中のスライドの該当サムネイルを示す、マーキングバー（赤い線）line.gifを、フォルダimg13に格納した
表示用HTMLのポイント説明
・表示用スライド写真それぞれを<div>の中に入れ込み、その中に、左右順送りボタンを配置する
・スライドのクリックで別ページに飛べるように、<a>タグでリンクを貼る（ここでは飛び先が#）
・各ボタンは、for=で、各ラジオボタンと関連付ける
・padding-top:の記述は、上部に表示されている要素の高さを確保するためのもので、要素の縦横比によって変わってくるので調整が必要となる場合がある。
・サムネイルをラジオボタンと関連付け、並べる
表示用CSSのポイント説明
・headder部分、#stageは、画面いっぱいのwidth:100%とする
・input { display:none; } としてラジオボタンを非表示にしているが、サイト内にinput文があるとその部分まで非表示になる
その場合は、#f1,#f2,,,,#b1,,,, { display:none } などとして、すべてのラジをボタンを非表示する
・各スライド（.photo）の幅は、画面サイズの54%に設定している
これを変更する場合は、@keyframes内の、leftの値の調整も必要となる
・各スライドに同じ内容を記述したanimationを時間差をつけて設定する
この場合、各スライドそれぞれに、@keyframes記述のanimationを用意する
・順送りボタンは、スライドのhoverで出現し、ボタンのhoverでその色を変える
・順送りボタンのクリックで、次の（前の）スライドに移行する様animationをセットする
・サムネイルをスライドの下に、position:absoluteで横並びにし、そのクリックで該当スライドが表示されるようにanimationをセットする
・どのサムネイルのスライドが表示されているかを示すマーキングバー（赤い線）を、スライドの移動と同期させて表示させる