先にカバーフロー型スライドショーを別ページに投稿したが、本稿は、左右移動ボタンを追加したスライダーの作成である。基本的には、前項のスクリプトを踏襲しているが、スライダーの性格上横長（一般的に多い幅960px）のステージに中央に表示スライド、左右に１枚ずつの控えスライドを配したタイプのものにした。
サンプル（DEMO）
本稿表示用HTML、CSS
あらかじめ用意した画像
・imagesフォルダに、左右移動ボタン（forward_1.png,forward_2.png,back_1.png,back2.png）を格納。_2が付いたボタンはマウスオーバー時に表示。
・img11フォルダに、720*232px の写真6枚を格納。
HTMLのポイント説明
・各写真を入れた、divと同じdivに、左右移動用ボタンを入れる。
（それぞれのボタンクリックで、それぞれに用意したanimatioを再生させる）
CSSのポイント説明
・animation には、見えていなスライドのものも含めて記述している。
・animationの記述をそれぞれのボタン用に用意せず、共有できないかどうか。同じ記述を連続して使うことはできないようなので、少なくとも２つの記述を交互に使うことでできそうであるが、時々反応しないときがあるので、すべてのボタンにそれぞれの記述を用意した。
・スライド写真のサイズを変更するときは、translateZの値を変えて位置を調節する必要がある。
お世話になっております。
度々のコメント失礼いたします…
スライドショー＆送りボタン「オールインワン型」の実装についての質問なのですが
コメントを入力する欄が正しく表示されず、コメントできなかったので、こちらに書かせていただきます。
本題ですが、「オールインワン型」で、600px×100pxの画像をスライドショーにしたいと思っています。
背景のグレーの部分の高さを画像に合わせるには、CSSのどこを変更すればいいですか？
何度もスイマセン、宜しくお願いします…
確かにコメント欄がおかしいですね。至急チェックしておきます。
ご質問の件ですが、htmlの最後に、
<!– stageの高さの確保 –>
<div style="padding:28%;"></div>
とありますが、28％は縦横比から計算するものです。
手っ取り早くは、適当にこの値を変えて、調整してください。
ありがとうございます。
そこを編集しても、変化がなかったので、新しくページを建ててスライドショー単体で試してみたところ、一応上手くいきました。
他のCSSが邪魔をして本来設置したいページにはうまく設置できないみたいです。
他の方法で高さを変更することはできませんか…？
レスポンシブにするには、この方法がいいです。
div style="padding:28% !important;"
としてみたらいかがですか?
レスポンシブにこだわらないのであれば、#stageのheightを指定してください。
前者の変更ではうまくいきませんでしたが、後者のheight指定の方法で成功しました！
わざわざありがとうございました。
これからも宜しくお願いします。
はじめまして。こちらのカバーフロー型スライダーを気に入って利用させていただきます。
同じようにやってみたのですが、左右移動ボタンが表示されないのですが、何か考えられる問題はありますでしょうか？
ボタン自体が見えないだけで、マウスオーバーすると反応します。
はじめまして。
＞ボタン自体が見えないだけで、マウスオーバーすると反応します。
という状態が、どういうものかよくわかりませんが、手のひらポインターが出るということでしょうか。それなら以下のことが考えられます。
imagesフォルダーに、forward_1.png,forward_2.png,back_1.png,back2.pngが格納されているのが前提ですが、
CSSの、左右ボタン表示（background:url(images/back_1.png); など）でファイル名が違っている。.png で指定していますが、.gif や .jpg の場合は、拡張子を間違えないようにしてください。
以上、ご検討ください。
返信ありがとうございます。
そうなんです、手のひらポインタは出てるのですが、画像は表示されないのです。
ファイル名も再度確認しましたが、間違っていないようでした。
imagesフォルダに他のファイルが入っていたりしたら、駄目ということでもないですよね、、、。
imagesフォルダに他のファイルが入っていても関係ありません。
画像ファイル名に誤りがなければ、CSS記述に間違いがありませんか。
background:url(images/back_1.png); のところ4カ所を、
もう一度確認してください。
ありがとうございます。凡ミスしていました。フォルダの階層が間違っていました。
cssファイルをcssフォルダに入れていたので、../images/back_1.png
でした。焦ってしまいましたがすぐにご返事いただけて助かりました。
本当にありがとうございました。
どういたしまして、解決おめでとうございます。