以前に示した「スライドイン・アウト型」をレスポンシブ対応にしたものである。
先の投稿、「フェイドイン・アウト型スライドショー（レスポンシブ）」に続くレスポンシブ対応スライドショーの第二弾である。
レスポンシブ対応スライドイン・アウト型のサンプル
本サンプル表示用ＨＴＭＬ
<div id="stage">
<div id="photo1" class="pic"><img src="img2/1.jpg"></div>
<div id="photo2" class="pic"><img src="img2/2.jpg"></div>
<div id="photo3" class="pic"><img src="img2/3.jpg"></div>
<div id="photo4" class="pic"><img src="img2/4.jpg"></div>
<div id="photo5" class="pic"><img src="img2/5.jpg"></div>
<div style="padding:28%;background:transparent;"></div>
</div>
HTMLのポイント説明
・<div style=”padding:28%;”></div> は、画像表示域を確保するために設置たもので、css の overflow:hidden; の対象領域ともいえる。
28％は、画像の高さ/幅/2 で計算したもので、画像サイズによって調整が必要である。
transparentはスライドショーを置く場所によって必要となる場合がある。
本サンプル表示用ＣＳＳ
#stage {
position: relative;
max-width: 600px;
margin: 0 auto;
overflow: hidden;
}
.pic img {
position:absolute;
width: 100%;
top:0;
left:100%;
-moz-animation: imgTrans 30s infinite;
-webkit-animation: imgTrans 30s infinite;
animation: imgTrans 30s infinite;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 6s;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
#photo3 img {
-moz-animation-delay: 12s;
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
#photo4 img {
-moz-animation-delay: 18s;
-webkit-animation-delay: 18s;
animation-delay: 18s;
}
#photo5 img {
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
animation-delay: 24s;
}
@-webkit-keyframes imgTrans {
0% { left:100%; }
5% { left:0%; }
20% { left:0%; }
25% { left:-100%; }
100% { left:-100%; }
}
@-moz-keyframes imgTrans {
0% { left:100%; }
5% { left:0%; }
20% { left:0%; }
25% { left:-100%; }
100% { left:-100%; }
}
@keyframes imgTrans {
0% { left:100%; }
5% { left:0%; }
20% { left:0%; }
25% { left:-100%; }
100% { left:-100%; }
}
ＣＳＳのポイント説明
・#stageのwidth指定を、max-width にする。
・画像（img）のwidthを100%、初期配置をleft:100%;に設定する。
・imgにanimationを付与する。（レスポンシブ非対応型の場合に配置した#frameは省略した）
スライドイン・アウト型スライドショーを作成したのですが、クロームでは表示されますが、ＩＥでは表示されません。
画像を8枚使用したいのですが、その場合のCSSはどのようになるのでしょうか。
ちなみに画像のサイズは940px×600pxです。
Ieの新しいバージョンを使ってください。もしくは、-webkit-などがついていないcssの記述を見直してください。Ieでも表示されます。
940×600のスライド8枚の場合、
・#stageのmax-width:940px;
・.picのanimationの間隔30sは、48sに
・#photo6 img,#photo7 img #photo8 img の記述を追加し、+6sずつdelayを長くする
・@keyframe… の記述で、1枚当たりの移動・停止が12.5%となる（5枚の場合は20%）
・<div style="padding:28%;>の28%は、説明を読んで調整する
で、いけると思います。
firefoxでやったんですけど画像が一枚しか表示されません…
このページをfirefoxで閲覧してください。
ちゃんと、スライドショーになっているはずです。
こんにちは、使用させていただいたのですが
スライドの一番初めが何もない状態になってしまうのですが、なにか手はありませんか？
よろしくお願いします。
こんにちは。
この質問だけでは、お答えのしようがありません。
二番目以降が正常に表示されているようなら、一番目に該当するHTMLとCSSの記述に誤りがないかどうか、1番目のスライド画像ファイルがきちんと存在するかどうかを確認してください。
ありがとうございます。
このページのサンプルにあるように、最初の1枚目がなにもない所に、スライドしてくるので
すべての画像は表示されています。
ただ、1枚目は既にそのばに居て欲しいんですが難しいでしょうか？
そういう意味でしたか、失礼しました。
各スライドの、animation-delayから、1.5s（30sの5%）を引いてください。
animationの5%から開始します。
一枚目は、animation-delay:-1.5s に、二枚目は、4.5s といった具合です。
すみません、質問させてください！
なぜかスライド画像が2枚横に並んだ状態になっているんです。
overflow: hidden;
が効いていないように思われます。
画像サイズは910pxで、max-width: 910px;としています。
動作などは問題ありません。
どうすれば直りますでしょうか？
2枚横に並んだ状態、とはどうなっているのでしょうか？
overflow: hidden; が効いていなければ、全スライドが横並びになります。
#stage のmax-widthを910px;にするだけで、あとはいじらなくてもうまくいくはずですが。
ご返信ありがとうございます。
大変遅くなりました。。
＞#stage のmax-widthを910px
こちらはそうしているのですが、910pxの画像が２枚横に並んでいる状態です。
つまり、横1820pxになってしまっています。
画像は６枚がスライドしているので、overflow: hidden;が効いていないわけではないようです。
よくわかりませんが、#stageの、position:relative;は、きちんと記述されているでしょうか？
いずれにしろ、もう一度CODEを見直してください。
はい、記述されています。
#stage {
position: relative;
margin: 0 auto;
max-width: 910px;
overflow: hidden;
}
.pic img {
position:absolute;
width: 100%;
left:100%;
-moz-animation: imgTrans 30s infinite;
-webkit-animation: imgTrans 30s infinite;
animation: imgTrans 30s infinite;
}
もしどこかおかしい部分があればご指摘お願いします。
dfさん。
ここに書かれている記述には誤りがありません。
私には、指摘することが思い浮かびません。
よろしければ、dfさんのサーバーにアップして、そのアドレスを教えてくれませんか。
（cssもソースで見えるようにしてください）
はじめまして。こちらのスライダーを利用させて頂きましたが、スライドインはするのですが前の画像がスライドアウトせずに次の画像が上に重なるように進んでしまいます。また、最後の画像から2度目の再生に移る時には1枚目の画像がほとんど表示させずに2枚目に進んでしまいます。追記は入念にチェックしたのですが間違いらしき個所は見当たりません。何か良い解決方法がありましたらご教示下さい。宜しくお願いします。
ytkoshi さん、はじめまして。
@keyframes imgTrans {
0% { left:100%; }
5% { left:0%; }
20% { left:0%; }
25% { left:-100%; }
100% { left:-100%; }
}
の記述で、20%と25%で 0->-100% すなわち、表示 -> 左に消える、ということになります。ここをよく見直してください。
ご回答ありがとうございます。
@keyframes imgTrans
の部分も何度も見直したのですが間違いないようです。
ウエブサイト欄に掲載サイトのURLを記載させて頂きます。
宜しくお願い致します。
サイト拝見しました。うまく動けば、効果的なところに採用していただいていますね。
スライドが9枚に増えていますね。と言うことは、すべてのスライドが一巡する時間（100%）のうち、11.1%でスライドを切り替えなければなりません。したがって、
@keyframes imgTrans {
0% { left:100%; }
2.5% { left:0%; }
11.1% { left:0%; }
13.6% { left:-100%; }
100% { left:-100%; }
}
のようなscriptになります。2.5%の値は好みで変えてもいいです。
それと、.pic img の中の、
animation: imgTrans 54s infinite; を、
animation: imgTrans 54s linear infinite; に変えてください。スムースに動くようになります。
さらに、.photo5 img で、
animation-delay: 25s; となっていますが、24sです。
以後、photo6 以降も1sずつずれていますので、修正してください。
以上で正常に動くと思います。
おかげさまで大変綺麗に動くようになりました。
詳細なアドバイスをありがとうございました。
どういたしまして。うまく動いてますね。
貴社、貴サイトのますますのご発展をお祈りします。
I am totally wowed and prpaered to take the next step now.
Thank you.
ありがとうございます。画像の縮小がされるようになりました。
ですが、また別の問題が発生してしまいました。
画像が全て左上にずれてしまいます。
こちら対処法はありますでしょうか？
ご教授いただけますと幸いです。
他の要素のHTML、cssに関連していると思います。
もし、レスポンシブタイプでない、最初に適用したタイプをHTMLの同じ位置に挿入して、望みの位置に表示されていたとするならば、width,heightの記述以外を同じ記述にしてみたらどうでしょうか。
すなわち、#frame のdivを設定してみたらということです。
解決していないようでしたら、以下を参考にしてください。
＜HTML＞を以下のようにします。#frameを追加し、paddingの記述を消します。
<div id="stage">
<div id="frame">
<div id="photo1" class="pic"><img src="img/artist/IMG_2040.JPG"></div>
<div id="photo2" class="pic"><img src="img/artist/IMG_3389.JPG"></div>
<div id="photo3" class="pic"><img src="img.artist/IMG_3406.JPG"></div>
<div id="photo4" class="pic"><img src="img/artist/IMG_3471.JPG"></div>
<div id="photo5" class="pic"><img src="img/artist/IMG_3586.JPG"></div>
</div>
</div>
CSSを、以下のようにします。
#stage {
position: relative;
margin: 0 auto;
}
#frame {
position:relative;
max-width:600px;
padding:38%;
overflow: hidden;
}
以上、ご検討ください。
正常に配置されるようになりました。
ありがとうございました。
また何かお借りすることになりましたらよろしくお願いいたします。
どういたしまして。
貴サイトのご発展をお祈りしています。