以前投稿した「スライダー（FadeIN・Out 型）」のレスポンシブ対応型である。
レスポンシブ対応とするために、ステージのwidth指定を、max-width としたり、スライドを格納している div の幅をスライド一枚分の100にして、position absolute の left 指定でスライドを横並びにするなどの変更を施したが、ほとんどは、以前稿通りのCodeとなっている。
サンプル（DEMO）
本サンプル表示用ＨＴＭＬ
<div id="stage">
<input type="radio" id="back1" name="gal">
<input type="radio" id="back2" name="gal">
<input type="radio" id="back3" class="btn" name="gal">
<input type="radio" id="back4" class="btn" name="gal">
<input type="radio" id="back5" class="btn" name="gal">
<input type="radio" id="next1" class="btn" name="gal">
<input type="radio" id="next2" class="btn" name="gal">
<input type="radio" id="next3" class="btn" name="gal">
<input type="radio" id="next4" class="btn" name="gal">
<input type="radio" id="next5" class="btn" name="gal">
<div id="photos">
<div id="photo1" class="pic"><img src="img2/1.jpg" alt="">
<label for="back1">
<div id="left1" class="b_left"><span>＜</span></div></label>
<label for="next1"><div id="right1" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo2" class="pic"><img src="img2/2.jpg">
<label for="back2"><div id="left2" class="b_left"><span>＜</span></div></label>
<label for="next2"><div id="right2" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo3" class="pic"><img src="img2/3.jpg">
<label for="back3"><div id="left3" class="b_left"><span>＜</span></div></label>
<label for="next3"><div id="right3" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo4" class="pic"><img src="img2/4.jpg">
<label for="back4"><div id="left4" class="b_left"><span>＜</span></div></label>
<label for="next4"><div id="right4" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo5" class="pic"><img src="img2/5.jpg">
<label for="back5"><div id="left5" class="b_left"><span>＜</span></div></label>
<label for="next5"><div id="right5" class="b_right"><span>＞</span></div></label>
</div>
</div>
<div style="padding:28%;"></div>
</div>
ＨＴＭＬのポイント説明
・htmlは、以前稿「スライダー（FadeIN・Out 型）」と全く同じであるが、#frame は必要ないので省略している。
・#stage内の最終行に、
<div style=”padding:28%;”></div>
を挿入している。これは、全ての div に高さ指定がないため、表示領域の高さを確保するために記述していて、overflow:hidden; の対象領域を確保し、スライダー下部に配置された要素をスライダーの下に表示させるようにさせるものである。
本サンプル表示用ＣＳＳ
/* 表示画面 */
#stage {
position: relative;
max-width: 600px;
margin: 0 auto;
//background:#000;
overflow: hidden;
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの基本の animation を設定*/
#photos {
position:absolute;
width:100%;
-webkit-animation: imgPassToLeft0 30s infinite;
animation: imgPassToLeft0 30s infinite;
}
/*各写真の並び位置を設定
#photo1, #photo2, #photo3, #photo4, #photo5 */
#photo2 { left:100%; }
#photo3 { left:200%; }
#photo4 { left:300%; }
#photo5 { left:400%; }
.pic { position:absolute;top:0;width:100%; }
/*写真サイズを可変に*/
.pic img { width:100%; }
/*送りボタン文字（＜、＞）の設定*/
.b_left span, .b_right span {
position: absolute;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 40px;
font-weight: bold;
opacity:0;
top: 40%;
color:#EEE;
}
.b_left span {
left: 5%;
}
.b_right span {
left: 85%;
}
/*ボタン文字hover時の設定*/
.pic:hover > label div span {
opacity:1;
color:#EEE;
}
.pic label div span:hover {
color:#f00;
cursor:pointer;
}
/* 全てのラジオボタンを非表示に */
#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
display: none;
}
/* 各送りボタンクリック時のanimation設定 */
#next1:checked ~ #photos {
animation: imgPassToLeft1 30s infinite;
animation-delay: -4.8s;
-webkit-animation: imgPassToLeft1 30s infinite;
-webkit-animation-delay: -4.8s;
}
#next2:checked ~ #photos {
animation: imgPassToLeft2 30s infinite;
animation-delay: -10.8s;
-webkit-animation: imgPassToLeft2 30s infinite;
-webkit-animation-delay: -10.8s;
}
#next3:checked ~ #photos {
animation: imgPassToLeft3 30s infinite;
animation-delay: -16.8s;
-webkit-animation: imgPassToLeft3 30s infinite;
-webkit-animation-delay: -16.8s;
}
#next4:checked ~ #photos {
animation: imgPassToLeft4 30s infinite;
animation-delay: -22.8s;
-webkit-animation: imgPassToLeft4 30s infinite;
-webkit-animation-delay: -22.8s;
}
#next5:checked ~ #photos {
animation: imgPassToLeft5 30s infinite;
animation-delay: -28.8s;
-webkit-animation: imgPassToLeft5 30s infinite;
-webkit-animation-delay: -28.8s;
}
#back1:checked ~ #photos {
animation: imgPassToRight1 30s infinite;
animation-delay: -28.8s;
-webkit-animation: imgPassToRight1 30s infinite;
-webkit-animation-delay: -28.8s;
}
#back2:checked ~ #photos {
animation: imgPassToRight2 30s infinite;
animation-delay: -22.8s;
-webkit-animation: imgPassToRight2 30s infinite;
-webkit-animation-delay: -22.8s;
}
#back3:checked ~ #photos {
animation: imgPassToRight3 30s infinite;
animation-delay: -16.8s;
-webkit-animation: imgPassToRight3 30s infinite;
-webkit-animation-delay: -16.8s;
}
#back4:checked ~ #photos {
animation: imgPassToRight4 30s infinite;
animation-delay: -10.8s;
-webkit-animation: imgPassToRight4 30s infinite;
-webkit-animation-delay: -10.8s;
}
#back5:checked ~ #photos {
animation: imgPassToRight5 30s infinite;
animation-delay: -4.8s;
-webkit-animation: imgPassToRight5 30s infinite;
-webkit-animation-delay: -4.8s;
}
/* animation設定 */
@keyframes imgPassToLeft0 {
0% { left: 0%;opacity:0;}
4% { left: 0%;opacity:1;}
16% { left: 0%;opacity:1;}
19.99%{ left: 0%;opacity:0;}
20% { left:-100%;opacity:0;}
24% { left:-100%;opacity:1;}
36% { left:-100%;opacity:1;}
39.99%{ left:-100%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-300%;opacity:0;}
64% { left:-300%;opacity:1;}
76% { left:-300%;opacity:1;}
79.99%{ left:-300%;opacity:0;}
80% { left:-400%;opacity:0;}
84% { left:-400%;opacity:1;}
96% { left:-400%;opacity:1;}
99.99%{ left:-400%;opacity:0;}
100% { left: 0%;opacity:0;}
}
@keyframes imgPassToLeft1 {
0% { left: 0%;opacity:0;}
4% { left: 0%;opacity:1;}
16% { left: 0%;opacity:1;}
19.99%{ left: 0%;opacity:0;}
20% { left:-100%;opacity:0;}
24% { left:-100%;opacity:1;}
36% { left:-100%;opacity:1;}
39.99%{ left:-100%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-300%;opacity:0;}
64% { left:-300%;opacity:1;}
76% { left:-300%;opacity:1;}
79.99%{ left:-300%;opacity:0;}
80% { left:-400%;opacity:0;}
84% { left:-400%;opacity:1;}
96% { left:-400%;opacity:1;}
99.99%{ left:-400%;opacity:0;}
100% { left: 0%;opacity:0;}
}
@keyframes imgPassToLeft2 {
0% { left: 0%;opacity:0;}
4% { left: 0%;opacity:1;}
16% { left: 0%;opacity:1;}
19.99%{ left: 0%;opacity:0;}
20% { left:-100%;opacity:0;}
24% { left:-100%;opacity:1;}
36% { left:-100%;opacity:1;}
39.99%{ left:-100%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-300%;opacity:0;}
64% { left:-300%;opacity:1;}
76% { left:-300%;opacity:1;}
79.99%{ left:-300%;opacity:0;}
80% { left:-400%;opacity:0;}
84% { left:-400%;opacity:1;}
96% { left:-400%;opacity:1;}
99.99%{ left:-400%;opacity:0;}
100% { left: 0%;opacity:0;}
}
@keyframes imgPassToLeft3 {
0% { left: 0%;opacity:0;}
4% { left: 0%;opacity:1;}
16% { left: 0%;opacity:1;}
19.99%{ left: 0%;opacity:0;}
20% { left:-100%;opacity:0;}
24% { left:-100%;opacity:1;}
36% { left:-100%;opacity:1;}
39.99%{ left:-100%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-300%;opacity:0;}
64% { left:-300%;opacity:1;}
76% { left:-300%;opacity:1;}
79.99%{ left:-300%;opacity:0;}
80% { left:-400%;opacity:0;}
84% { left:-400%;opacity:1;}
96% { left:-400%;opacity:1;}
99.99%{ left:-400%;opacity:0;}
100% { left: 0%;opacity:0;}
}
@keyframes imgPassToLeft4 {
0% { left: 0%;opacity:0;}
4% { left: 0%;opacity:1;}
16% { left: 0%;opacity:1;}
19.99%{ left: 0%;opacity:0;}
20% { left:-100%;opacity:0;}
24% { left:-100%;opacity:1;}
36% { left:-100%;opacity:1;}
39.99%{ left:-100%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-300%;opacity:0;}
64% { left:-300%;opacity:1;}
76% { left:-300%;opacity:1;}
79.99%{ left:-300%;opacity:0;}
80% { left:-400%;opacity:0;}
84% { left:-400%;opacity:1;}
96% { left:-400%;opacity:1;}
99.99%{ left:-400%;opacity:0;}
100% { left: 0%;opacity:0;}
}
@keyframes imgPassToLeft5 {
0% { left: 0%;opacity:0;}
4% { left: 0%;opacity:1;}
16% { left: 0%;opacity:1;}
19.99%{ left: 0%;opacity:0;}
20% { left:-100%;opacity:0;}
24% { left:-100%;opacity:1;}
36% { left:-100%;opacity:1;}
39.99%{ left:-100%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-300%;opacity:0;}
64% { left:-300%;opacity:1;}
76% { left:-300%;opacity:1;}
79.99%{ left:-300%;opacity:0;}
80% { left:-400%;opacity:0;}
84% { left:-400%;opacity:1;}
96% { left:-400%;opacity:1;}
99.99%{ left:-400%;opacity:0;}
100% { left: 0%;opacity:0;}
}
@keyframes imgPassToRight1 {
0% { left:-400%;opacity:0;}
4% { left:-400%;opacity:1;}
16% { left:-400%;opacity:1;}
19.99%{ left:-400%;opacity:0;}
20% { left:-300%;opacity:0;}
24% { left:-300%;opacity:1;}
36% { left:-300%;opacity:1;}
39.99%{ left:-300%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-100%;opacity:0;}
64% { left:-100%;opacity:1;}
76% { left:-100%;opacity:1;}
79.99%{ left:-100%;opacity:0;}
80% { left: 0%;opacity:0;}
84% { left: 0%;opacity:1;}
96% { left: 0%;opacity:1;}
99.99%{ left: 0%;opacity:0;}
100% { left:-400%;opacity:0;}
}
@keyframes imgPassToRight2 {
0% { left:-400%;opacity:0;}
4% { left:-400%;opacity:1;}
16% { left:-400%;opacity:1;}
19.99%{ left:-400%;opacity:0;}
20% { left:-300%;opacity:0;}
24% { left:-300%;opacity:1;}
36% { left:-300%;opacity:1;}
39.99%{ left:-300%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-100%;opacity:0;}
64% { left:-100%;opacity:1;}
76% { left:-100%;opacity:1;}
79.99%{ left:-100%;opacity:0;}
80% { left: 0%;opacity:0;}
84% { left: 0%;opacity:1;}
96% { left: 0%;opacity:1;}
99.99%{ left: 0%;opacity:0;}
100% { left:-400%;opacity:0;}
}
@keyframes imgPassToRight3 {
0% { left:-400%;opacity:0;}
4% { left:-400%;opacity:1;}
16% { left:-400%;opacity:1;}
19.99%{ left:-400%;opacity:0;}
20% { left:-300%;opacity:0;}
24% { left:-300%;opacity:1;}
36% { left:-300%;opacity:1;}
39.99%{ left:-300%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-100%;opacity:0;}
64% { left:-100%;opacity:1;}
76% { left:-100%;opacity:1;}
79.99%{ left:-100%;opacity:0;}
80% { left: 0%;opacity:0;}
84% { left: 0%;opacity:1;}
96% { left: 0%;opacity:1;}
99.99%{ left: 0%;opacity:0;}
100% { left:-400%;opacity:0;}
}
@keyframes imgPassToRight4 {
0% { left:-400%;opacity:0;}
4% { left:-400%;opacity:1;}
16% { left:-400%;opacity:1;}
19.99%{ left:-400%;opacity:0;}
20% { left:-300%;opacity:0;}
24% { left:-300%;opacity:1;}
36% { left:-300%;opacity:1;}
39.99%{ left:-300%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-100%;opacity:0;}
64% { left:-100%;opacity:1;}
76% { left:-100%;opacity:1;}
79.99%{ left:-100%;opacity:0;}
80% { left: 0%;opacity:0;}
84% { left: 0%;opacity:1;}
96% { left: 0%;opacity:1;}
99.99%{ left: 0%;opacity:0;}
100% { left:-400%;opacity:0;}
}
@keyframes imgPassToRight5 {
0% { left:-400%;opacity:0;}
4% { left:-400%;opacity:1;}
16% { left:-400%;opacity:1;}
19.99%{ left:-400%;opacity:0;}
20% { left:-300%;opacity:0;}
24% { left:-300%;opacity:1;}
36% { left:-300%;opacity:1;}
39.99%{ left:-300%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-100%;opacity:0;}
64% { left:-100%;opacity:1;}
76% { left:-100%;opacity:1;}
79.99%{ left:-100%;opacity:0;}
80% { left: 0%;opacity:0;}
84% { left: 0%;opacity:1;}
96% { left: 0%;opacity:1;}
99.99%{ left: 0%;opacity:0;}
100% { left:-400%;opacity:0;}
}
@-webkit-keyframes imgPassToLeft0 {
0% { left: 0%;opacity:0;}
4% { left: 0%;opacity:1;}
16% { left: 0%;opacity:1;}
19.99%{ left: 0%;opacity:0;}
20% { left:-100%;opacity:0;}
24% { left:-100%;opacity:1;}
36% { left:-100%;opacity:1;}
39.99%{ left:-100%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-300%;opacity:0;}
64% { left:-300%;opacity:1;}
76% { left:-300%;opacity:1;}
79.99%{ left:-300%;opacity:0;}
80% { left:-400%;opacity:0;}
84% { left:-400%;opacity:1;}
96% { left:-400%;opacity:1;}
99.99%{ left:-400%;opacity:0;}
100% { left: 0%;opacity:0;}
}
@-webkit-keyframes imgPassToLeft1 {
0% { left: 0%;opacity:0;}
4% { left: 0%;opacity:1;}
16% { left: 0%;opacity:1;}
19.99%{ left: 0%;opacity:0;}
20% { left:-100%;opacity:0;}
24% { left:-100%;opacity:1;}
36% { left:-100%;opacity:1;}
39.99%{ left:-100%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-300%;opacity:0;}
64% { left:-300%;opacity:1;}
76% { left:-300%;opacity:1;}
79.99%{ left:-300%;opacity:0;}
80% { left:-400%;opacity:0;}
84% { left:-400%;opacity:1;}
96% { left:-400%;opacity:1;}
99.99%{ left:-400%;opacity:0;}
100% { left: 0%;opacity:0;}
}
@-webkit-keyframes imgPassToLeft2 {
0% { left: 0%;opacity:0;}
4% { left: 0%;opacity:1;}
16% { left: 0%;opacity:1;}
19.99%{ left: 0%;opacity:0;}
20% { left:-100%;opacity:0;}
24% { left:-100%;opacity:1;}
36% { left:-100%;opacity:1;}
39.99%{ left:-100%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-300%;opacity:0;}
64% { left:-300%;opacity:1;}
76% { left:-300%;opacity:1;}
79.99%{ left:-300%;opacity:0;}
80% { left:-400%;opacity:0;}
84% { left:-400%;opacity:1;}
96% { left:-400%;opacity:1;}
99.99%{ left:-400%;opacity:0;}
100% { left: 0%;opacity:0;}
}
@-webkit-keyframes imgPassToLeft3 {
0% { left: 0%;opacity:0;}
4% { left: 0%;opacity:1;}
16% { left: 0%;opacity:1;}
19.99%{ left: 0%;opacity:0;}
20% { left:-100%;opacity:0;}
24% { left:-100%;opacity:1;}
36% { left:-100%;opacity:1;}
39.99%{ left:-100%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-300%;opacity:0;}
64% { left:-300%;opacity:1;}
76% { left:-300%;opacity:1;}
79.99%{ left:-300%;opacity:0;}
80% { left:-400%;opacity:0;}
84% { left:-400%;opacity:1;}
96% { left:-400%;opacity:1;}
99.99%{ left:-400%;opacity:0;}
100% { left: 0%;opacity:0;}
}
@-webkit-keyframes imgPassToLeft4 {
0% { left: 0%;opacity:0;}
4% { left: 0%;opacity:1;}
16% { left: 0%;opacity:1;}
19.99%{ left: 0%;opacity:0;}
20% { left:-100%;opacity:0;}
24% { left:-100%;opacity:1;}
36% { left:-100%;opacity:1;}
39.99%{ left:-100%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-300%;opacity:0;}
64% { left:-300%;opacity:1;}
76% { left:-300%;opacity:1;}
79.99%{ left:-300%;opacity:0;}
80% { left:-400%;opacity:0;}
84% { left:-400%;opacity:1;}
96% { left:-400%;opacity:1;}
99.99%{ left:-400%;opacity:0;}
100% { left: 0%;opacity:0;}
}
@-webkit-keyframes imgPassToLeft5 {
0% { left: 0%;opacity:0;}
4% { left: 0%;opacity:1;}
16% { left: 0%;opacity:1;}
19.99%{ left: 0%;opacity:0;}
20% { left:-100%;opacity:0;}
24% { left:-100%;opacity:1;}
36% { left:-100%;opacity:1;}
39.99%{ left:-100%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-300%;opacity:0;}
64% { left:-300%;opacity:1;}
76% { left:-300%;opacity:1;}
79.99%{ left:-300%;opacity:0;}
80% { left:-400%;opacity:0;}
84% { left:-400%;opacity:1;}
96% { left:-400%;opacity:1;}
99.99%{ left:-400%;opacity:0;}
100% { left: 0%;opacity:0;}
}
@-webkit-keyframes imgPassToRight1 {
0% { left:-400%;opacity:0;}
4% { left:-400%;opacity:1;}
16% { left:-400%;opacity:1;}
19.99%{ left:-400%;opacity:0;}
20% { left:-300%;opacity:0;}
24% { left:-300%;opacity:1;}
36% { left:-300%;opacity:1;}
39.99%{ left:-300%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-100%;opacity:0;}
64% { left:-100%;opacity:1;}
76% { left:-100%;opacity:1;}
79.99%{ left:-100%;opacity:0;}
80% { left: 0%;opacity:0;}
84% { left: 0%;opacity:1;}
96% { left: 0%;opacity:1;}
99.99%{ left: 0%;opacity:0;}
100% { left:-400%;opacity:0;}
}
@-webkit-keyframes imgPassToRight2 {
0% { left:-400%;opacity:0;}
4% { left:-400%;opacity:1;}
16% { left:-400%;opacity:1;}
19.99%{ left:-400%;opacity:0;}
20% { left:-300%;opacity:0;}
24% { left:-300%;opacity:1;}
36% { left:-300%;opacity:1;}
39.99%{ left:-300%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-100%;opacity:0;}
64% { left:-100%;opacity:1;}
76% { left:-100%;opacity:1;}
79.99%{ left:-100%;opacity:0;}
80% { left: 0%;opacity:0;}
84% { left: 0%;opacity:1;}
96% { left: 0%;opacity:1;}
99.99%{ left: 0%;opacity:0;}
100% { left:-400%;opacity:0;}
}
@-webkit-keyframes imgPassToRight3 {
0% { left:-400%;opacity:0;}
4% { left:-400%;opacity:1;}
16% { left:-400%;opacity:1;}
19.99%{ left:-400%;opacity:0;}
20% { left:-300%;opacity:0;}
24% { left:-300%;opacity:1;}
36% { left:-300%;opacity:1;}
39.99%{ left:-300%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-100%;opacity:0;}
64% { left:-100%;opacity:1;}
76% { left:-100%;opacity:1;}
79.99%{ left:-100%;opacity:0;}
80% { left: 0%;opacity:0;}
84% { left: 0%;opacity:1;}
96% { left: 0%;opacity:1;}
99.99%{ left: 0%;opacity:0;}
100% { left:-400%;opacity:0;}
}
@-webkit-keyframes imgPassToRight4 {
0% { left:-400%;opacity:0;}
4% { left:-400%;opacity:1;}
16% { left:-400%;opacity:1;}
19.99%{ left:-400%;opacity:0;}
20% { left:-300%;opacity:0;}
24% { left:-300%;opacity:1;}
36% { left:-300%;opacity:1;}
39.99%{ left:-300%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-100%;opacity:0;}
64% { left:-100%;opacity:1;}
76% { left:-100%;opacity:1;}
79.99%{ left:-100%;opacity:0;}
80% { left: 0%;opacity:0;}
84% { left: 0%;opacity:1;}
96% { left: 0%;opacity:1;}
99.99%{ left: 0%;opacity:0;}
100% { left:-400%;opacity:0;}
}
@-webkit-keyframes imgPassToRight5 {
0% { left:-400%;opacity:0;}
4% { left:-400%;opacity:1;}
16% { left:-400%;opacity:1;}
19.99%{ left:-400%;opacity:0;}
20% { left:-300%;opacity:0;}
24% { left:-300%;opacity:1;}
36% { left:-300%;opacity:1;}
39.99%{ left:-300%;opacity:0;}
40% { left:-200%;opacity:0;}
44% { left:-200%;opacity:1;}
56% { left:-200%;opacity:1;}
59.99%{ left:-200%;opacity:0;}
60% { left:-100%;opacity:0;}
64% { left:-100%;opacity:1;}
76% { left:-100%;opacity:1;}
79.99%{ left:-100%;opacity:0;}
80% { left: 0%;opacity:0;}
84% { left: 0%;opacity:1;}
96% { left: 0%;opacity:1;}
99.99%{ left: 0%;opacity:0;}
100% { left:-400%;opacity:0;}
}
ＣＳＳのポイント説明
以前稿からの変更点を中心に記述
・#stageのwidth指定を、max-width に変更
・すべての div の高さ指定を排除し、幅は、100%に指定
・#photos のwidth指定を、3000px（写真5枚分）から、100%（同1枚分） に変更
・各写真を格納している、#photo1,,,を、position absolute のtop:0、left指定で、横一列に並ぶようにした。
・送りボタン、animationの設定は、全て以前稿通り。