ページのヘッダー部分に表示するスライダーで、表示スライドの前後のスライドの部分を左右に表示するタイプで、スライド下部にサムネイルを水平に並べて、そのクリックでそのスライドに飛べるようにしたものを作成した。
画面サイズに従って、全体を収縮して表示できるようにしたが、タブレット以下の端末用には、中央スライドの部分の比率を上げた方がいいと思うが、今回はそこまでには対応していない。また、中央部分はフルサイズ表示で標準的な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をセットする
・どのサムネイルのスライドが表示されているかを示すマーキングバー（赤い線）を、スライドの移動と同期させて表示させる
オールインワン型スライダー（サムネイル付き）で、自動的にスライドしないタグが知りたいです。
スライドショー抜きでと言うことだと思うのですが、それなら、transitionを使って作り直した方が早いと思います。
「左右スライド型フォトギャラリー」(サムネイルクリック型の左右スライド型)が参考になると思います。
以下のページに、作成例を掲載しました。
http://css.programming.jp/pages/slider_with_thumbnails_withnoshow.html
CSSだけでスライドショーを作ろうと思って、探しているうちにこのサイトにたどり着きました。いろいろと紹介していただきありがとうございます。質問させていただきますが、サムネイルつきのスライドショーのメインの写真を一枚だけ表示させるにはどのようにしたらよろしいでしょうか？
overflow:hiddenを使っても左右の写真が隠れなかったので、ご教示ください。よろしくお願いします。
snafさん、はじめまして。
さて、この例は、スライドショーに、送りボタン、サムネイルが連動するように作っていますので、変更はそう簡単ではありません。
スライドを中央に表示して、左右のスライドは表示させないようにするという趣旨だと思うのですが、#stageのmax-width;を例えば、1000pxとし、幅をfixします。さらに、.photoのwidth;を100%にすると、stage一杯にスライドを標示させる準備が整います。
次に、animationで、左にスライドさせる場合には、left:100% –> left:0% に、さらに、–> -100% に設定します。こうすると、画面一杯にスライドが切替割ります。右にスライドさせる場合は、この逆です。
さらにボタンやサムネイルの位置調整が必要になります。
と言うわけで、申し訳ありませんが、「ここの数値をこう変えて」と言うような簡単なお答えができません。今日のところは、この程度で勘弁願います。
管理人様
早速のご返答、ご教示ありがとうございました。大変助かりました。やってみましたが、何とかできました。ただ、もう少し手を加えたいと思っているのですが、一つをいじるといろいろと不具合が出てくるので、一度できた段階でまた見ていただければと思っています。もしよければ、こういう要望を持っている人のためにもなると思いますので、貴サイトで紹介していただいても構いません。（もともと管理人様の手法ですので…）
しかし、CSSだけでここまでできると驚きです。仕事でCSSを使っていますが、CSS3に乗り遅れていて、特にアニメーション系はなかなか難しいです。でも、こういうサンプルがあると理解が早まります。本当にありがたいです。
また何かあればご連絡させていただくこともあるかと思いますが、今後ともよろしくお願いいたします。
私のヒントで、仕上げるというのは、相当なレベルですね。
機会があればぜひ紹介してください。
これからも宜しくお願いします。
管理人様
ありがとうございます。見様見真似で何とかやっていますが、もっと基礎を学ばないとと日々思わされています。作ったサイトはスライドショーだけのサンプルページですが、ここのウェブサイト欄に入れて送ってもよろしいですか？ もし公開されてしまうようであれば、個別にアドレスをお送りしたいと思います。まだパスワードをかけて非公開としてあります。
どうしても時間の設定がうまくいかず、ちょっと間延びした動きになってしまいます。また最初の一枚目が止まった状態で始まらずに動きながらスタートするということにも困っています。
お忙しいところ恐縮ですが、お時間のある時にアドバイスをいただけたら幸いです。よろしくお願いいたします。
差し支えなければ、ここにサンプルページのURLを貼ってください。
あるいは、tyosbb@ybb.ne.jp にメールしてください。
はじめまして
いつも参考にさせていただいています。
オールインワン型スライダー（サムネイル付き）自動タイプのサムネイル無しスライダーのタグをおしえて頂けませんか？このスライダーは大辺気に入っています。
はじめまして。
サムネイルの表示タグ<!– サムネイルの設置 –>の部分を全部削除すればOKです。
他には影響しないと思います。
気になれば、CSSの、/* サムネイルクリック時のanimation */部分全部を削除してください。
早速有難うございます。
一度やってみます。
無事にできました。感謝いたします。
ただ、サムネイルが表示されていた黒い部分を消すにはどうしたらよろしいでしょうか？
何度もすみません。
CSSの、#stage内の、background: #333;を消してみてください。
有難うございます。
backgroundは消しましたが、その部分が白くなっていますので
この隙間を詰めることはできますか？ボックスのmarginがbottom：0にはなっているんですが
すみませんど素人で…
HTMLでスライド設置の
の18の値を調節してください。例えば、14％。
有難うございます。
出来ました。
何度も何度もすみませんでした。
どういたしまして。
ご活用ください。
すみません。
お忙しいところすみません。
もう一つお伺いしたいのですが、画像サイズの件ですが上記のサイズ1150*368pxで試したのですがこのサイズより小さくなるとセンターよりずれてしまうのですが（例えば780px*289px）のサイズですと、どの当たりの数値を変更すればよろしいでしょうか？
宜しくお願いします。
よっこらしょさん
本文中の
「中央部分はフルサイズ表示で標準的な1000px強に設定したが、.photoの54%を調整してそのサイズを変更することができる。ただしその場合は、@keyframes内の、leftの値の調整も必要である。」
を参考にしてください。また、送りボタンの位置も調整必要かと思います。
早速ご教示ありがとうございます。
時間が掛かると思いますが、やってみます。