スライドショー、スライドの位置（順番）表示と移動を兼ねたボタン、左右送りボタンの機能を併せ持ったスライドショーで、スライド（画像）が、画面幅いっぱいに表示されるタイプのスライダーである。スライドは、画面サイズに応じてスライド幅が画面サイズの幅に調整される。いわゆるレスポンシブタイプになっている。
サンプル（DEMO）
準備
・画像（ここでは、1920*400px の5枚の写真）をhtmlと同じディレクトリーのフォルダー（ここではimg12）に準備する。
・送りボタン用画像、左右用２つ、それぞれのロールオーバー時の画像を、htmlと同じディレクトリーのフォルダー（ここではimages）に準備する。
ここでは、forward_1.gif、forward_2.gif、back_1.gif、back_2.gif
・表示スライドの順番を表示するためのドット画像、trbtn_1.gifと、trbtn_2.gif を images フォルダに準備する。
HTMLのポイント説明
・スライドをdivの#photos内に水平に5枚並べて、1枚目のスライドの前に5枚目のスライド、5枚目のスライドの後に1枚目のスライドを付け加える。計7枚の帯になる。
・各スライドを入れるdiv（#photo1,#photo2,,,）内には、それぞれに、送りボタンを配置する。
・現在、どの順番のスライドが表示されているかを示すため、灰色のドット画像（trbtn_1）を div #btn_band 内に５つ水平に並べて配置し、青色のドット画像がその上を移動し、順番を示すようにする。
CSSのポイント説明
・スライドが水平に並んでいる#photosを、左右にanimationで移動させることにより、スライドショーを形成する。
・スライドショーが再生されている途中で、左右の送りボタン、あるいは、スライドに関連付けられているドットボタンをクリックすることにより、その指示に従って、目的のスライドに移動し表示させる。
・位置表示ボタン移動animationがちょっと複雑になっているのは、ドットが移動しているときはopacityを0もして見えないようにしているため。
640*540の画像を使ってやっているのですが、なぜか400px？の高さになってしまい画像全てが表示できません。640*540のサイズ全て表示させるにはどこのパラメーターを調整すればよいのでしょうか。
また掲載しているcssをコピペしたはずなのですが、表示ボタン用ラジオボタンの4つ目(または5つ目)クリックするとなぜか１枚目の画像に移動してスライドショーが機能しなくなります。原因はどこの部分なのですか？
ソースはほぼ同じです。
てすとさん、こんにちは。
640フルワイドのデバイス用と言うことですね。
以下の2点を変更してください。
１）#stage { の中の、overflow:hidden; を削除してください。
２）#btn_band を以下に書きかえてください。
#btn_band {
position:absolute;
width:100px;
left:45%;
padding-top:50%;
}
ここで、left、padding-top の数値は、適切な値に代えてください。
これでうまくいくはずです。
なお、ボタンの４，５でうまく反応しない原因は、定かではありませんが、
htmlの、for="r4"、for="r5" の関連付けがうまくいっていないような気がします。
以上ご検討ください。
素早い返信ありがとうございます。
ご提示いただいた通りしてみました、無事画像全てが表示されたのですが。
Divタグの箱の中に更にdivタグの箱にスライドショーを組み込んでいるので見せたい部分以外の画像がはみ出てしまっているのですが、これはどうすれば良いのでしょうか。マスクなどで切った方が良いのでしょうか。
位置表示ボタンに関してですが、コピペしてきてそのままなので何もいじってはいないので原因がわかりません。
関連付けもそのままなので大丈夫だとは思うのですが、スライドショーの画像サイズにより不具合が出る場合があるのでしょうか？
よろしくお願い致します。
この項のスライダーは、画面いっぱいに表示するタイプのものです。
画面の部分に埋め込む場合は、オールインワン型スライダーの方を応用してください。
ありがとうございます。
そちらを参考にさせていただきます。
また何かあればご質問させて頂きますのでよろしくお願い致します。
こんにちわ。CSS3を勉強している者です。
このスライダーについて質問させていただきます。
htmlの左右送りボタンに設定されているid、
left1～5、及びright1～5にはどのような働きがあるのでしょうか？
ご教授いただければ幸いです。
よろしくお願いします。
Biscooさん、こんにちは。
左右送りボタンは、各スライドに表示されていて、どのスライドの送りボタンがクリックされたかを検知する必要があります。
idは、各スライドを特定するための目印みたいなものです。また、このidとラジオボタンが関連付けられていて、関連付けられているラジオボタン、例えば、#r1がselectされると、それに応じたアニメーションが発生します。
tyosbbさん、こんにちは。
ご返信ありがとうございます。
left1～5、及びright1～5は、
htmlの左右矢印にidを設定する時の1箇所しか見つけられず、
htmlにもcssのにも、
left1～5、及びright1～5が再び書かれている箇所を、
他に見つけることができませんでした。
①idとラジオボタンが関連付けられている
②#r1がselectされると、それに応じたアニメーションが発生する
とのことですが、①や②に関する記述はどの箇所でしょうか？
具体的に教えていただけると勉強になります。
よろしくお願いします。
ごめんなさい、私の回答に誤りがありました。
もう一度説明します。
＜label for="back1"＞＜div id="left1" class="b_left"＞＜/div＞＜/label＞
とｈｔｍｌにありますが、これが、ラジオボタン#back1とボタン#left1の関連付けです。
すなわち、#left1がクリックされると、#back1がchekedされたことになり、
#back1:checked ~ #photos 以下のanimation imgPassRight1が作動します。
この、htmlとcssの関連は、このサイトの初期の稿に繰り返し記述されていますので、参考にしてください。
ご返信ありがとうございます。
そういう仕組みなのですね。
まだまだわからないことが多いです。
これから、御サイトの初期の稿から順に拝見し、
さらに勉強させていただこうと思います。
ありがとうございました。
どういたしまして。
繰り返し、挑戦することでレベルが上がっていきますので、頑張ってください。
とても参考にさせていただいています！
ありがとうございます。
ですが、オールインワン型を書き換えて使おうと思っているのですがうまく行きません。
・位置表示ボタンのみ（左右ボタン無し）
・３枚スライド
・ブラウザの75％の幅
・写真全体表示
のものを作りたいのですがあと一歩の所で行き詰まっています。
それは、位置表示時ボタンがうまく機能しないということです。
３枚スライドにした場合、どのように書き換えればよいのでしょうか？
独学でホームページを製作しているのでわからないことだらけで申し訳ないですが、ご教授よろしくお願いします。
こんにちは
フルワイドでない、オールインワン型に同じ質問が寄せられています。
３つに減らそうとする場合、スライド、位置表示ボタン関係のhtml、cssを3つに減らすことはもちろんですが、animationの中身も変えないといけません。
@keyframes flowSlides { の中の記述は、5枚用に記載されています。すなわち、20（100/5）％刻みでスライドが切り替わるように設定されています。３枚でやろうとしているわけですから、３３％刻みで設定しないといけません。33％前後でopacityを調節してFadeIN、OUTをつけてください。２０％の例にならって、記述してみてください。
全て３つように書き換えてスライドは完成しておりますが、位置表示ボタンだけがどうしてもうまく行きません（泣）
どのようにうまくいきませんか?
ドットは表示され、タイミングよく移動していますか?
移動しますが、一枚目以降はおかしな場所にドットが移動してしまいます、、
ドットの@keyframesで、leftの数値も変更する必要がありますが。
調整して見て下さい。