レイアウトが崩れてしまう為
このcssを

#stage {
position : relative;
max-width : 600px;
margin : 0 auto;
background : #ddd;
}
.pic {
position : absolute;
}
.pic img {
width : 100%;
height : auto;
opacity : 0;
-moz-animation : imgTrans 40s infinite;
-webkit-animation : imgTrans 40s ease-in infinite;
animation : imgTrans 40s infinite;

下記の様に記述したのですが、これが原因でしょうか？

#stage {
position : relative;
max-width : 1000px;
margin-left : 0 auto;
background : #ddd;
height : 400px;

.pic {
position : absolute;
width : 1000px;
height : 400px;
}

.pic img {
width : 1000px;
height : 400px;
opacity : 0;
-moz-animation : imgTrans 40s infinite;
-webkit-animation : imgTrans 40s ease-in infinite;
animation : imgTrans 40s infinite;
}
他の部分のcssとhtmlは一緒です。

はじめまして、いつも参考にさせて頂いてます。

早速質問なのですが、
このスライドショーを別々のページに置こうと考えているのですが、
表示するスライドの枚数、遷移時間を別々に設定しようとしてつまづいております。
cssの記述をどのようにすればよろしいでしょうか？
また、特定の1枚だけを長く表示させることは可能でしょうか？
ご教示頂けると嬉しいです、よろしくお願いいたします。

すみません！

pic {
position: absolute;
}

が抜けていたみたいで、できました！
本当にありがとうございました。

次はサムネイル用ロールオーバーに挑戦したく思います。

先日フェイドイン型フォトギャラリー（レスポンシブ）で質問させていただいた。abdです。
早速ご質問にご回答いただき感謝しております。

#stage2の動作が確認できません。(htmlの.pic2を.picにすると動作しますが#stageと同タイミングになるため写真が消えている時間が長くなります）
イメージは#stageで５枚を２５秒で繰り返し、#stage2は２枚を16秒で表示したいと考えております。

何度も試行錯誤をしてみたのですが、解決できずに困っています。ご教授いただけませんでしょうか？

htmlは以下の通りです。

cssは以下の通りです。
#stage {
position: relative;
max-width:600px;
margin: 0 auto;
background:#ddd;
}
.pic {
position: absolute;
}
.pic img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 25s infinite;
-webkit-animation: imgTrans 25s ease-in infinite;
animation: imgTrans 25s infinite;
left:10%;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
#photo3 img {
-moz-animation-delay: 10s;
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
#photo4 img{
-moz-animation-delay: 15s;
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
#photo5 img {
-moz-animation-delay: 20s;
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
—————————————————————————-
#stage2 {
position: relative;
max-width:600px;
margin: 0 auto;
background:#ddd;
}
.pic2 {
position: absolute;
}
.pic2 img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans2 16s infinite;
-webkit-animation: imgTrans2 16s ease-in infinite;
animation: imgTrans2 16s infinite;
left:10%;
}
#photo21 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo22 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;

@-webkit-keyframes imgTrans2 {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans2 {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans2 {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}