スライドが水平方向に移動するタイプのスライドショーで、マウスオーバーで出現する左右への送りボタンで一枚ずつのコマ送りも可能にしたもの、いわゆるスライダーの作成である。
サンプル
表示用ＨＴＭＬ
<div id="stage">
<div id="frame">
<input type="radio" id="back1" name="gal">
<input type="radio" id="back2" name="gal">
<input type="radio" id="back3" name="gal">
<input type="radio" id="back4" name="gal">
<input type="radio" id="back5" name="gal">
<input type="radio" id="next1" name="gal">
<input type="radio" id="next2" name="gal">
<input type="radio" id="next3" name="gal">
<input type="radio" id="next4" name="gal">
<input type="radio" id="next5" name="gal">
<div id="photos">
<div id="photo0" class="pic"><img src="img2/5.jpg">
</div>
<div id="photo1" class="pic"><img src="img2/1.jpg">
<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 id="photo6" class="pic"><img src="img2/1.jpg">
</div>
</div>
</div>
</div>
HTMLの概略説明
・送りボタンに関連付けるラジオボタンを１０個（５枚の写真に各左右２個ずつ）設置する（非表示）。
・#photos 内にすべてのスライド（ここでは５枚）を水平に並べ、更に、一番左に最後のスライド、一番右に最初のスライドを加える。
（スライドをスムースに連続して送るため）
・各スライド（#photo1,#photo2,,,）に、写真、左右送りボタンを設置する。
表示用ＣＳＳ（Ie向けのみ）
/* 表示画面 */
#stage {
position: relative;
width: 600px;
height:338;
margin: 0 auto;
}
/* 表示枠 */
#frame {
width: 600px;
height: 338px;
position: relative;
overflow: hidden;
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの animation を設定*/
#photos {
position:absolute;
top:0;
width:4200px;
animation: imgPassToLeft0 30s infinite;
}
/*各写真の並び位置を設定
#photo0と#photo5、#photo6と#photo1は同じスライド*/
#photo0, #photo1, #photo2, #photo3, #photo4, #photo5, #photo6 {
float:left;
position:relative;
}
/* 全てのラジオボタンを非表示に */
#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
display: none;
}
/*送りボタン文字（＜、＞）の設定*/
.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: 140px;
color:#EEE;
}
.b_left span {
left: 10px;
}
.b_right span {
left: 560px
}
/*ボタン文字hover時の設定*/
.pic:hover > label div span {
opacity:1;
color:#EEE;
}
.pic label div span:hover {
color:#f00;
cursor:pointer;
}
/* 各送りボタンクリック時のanimation設定 */
#next1:checked ~ #photos {
animation: imgPassToLeft1 30s infinite;
animation-delay: -4.8s;
}
#next2:checked ~ #photos {
animation: imgPassToLeft2 30s infinite;
animation-delay: -10.8s;
}
#next3:checked ~ #photos {
animation: imgPassToLeft3 30s infinite;
animation-delay: -16.8s;
}
#next4:checked ~ #photos {
animation: imgPassToLeft4 30s infinite;
animation-delay: -22.8s;
}
#next5:checked ~ #photos {
animation: imgPassToLeft5 30s infinite;
animation-delay: -28.8s;
}
#back1:checked ~ #photos {
animation: imgPassToRight1 30s infinite;
animation-delay: -28.8s;
}
#back2:checked ~ #photos {
animation: imgPassToRight2 30s infinite;
animation-delay: -22.8s;
}
#back3:checked ~ #photos {
animation: imgPassToRight3 30s infinite;
animation-delay: -16.8s;
}
#back4:checked ~ #photos {
animation: imgPassToRight4 30s infinite;
animation-delay: -10.8s;
}
#back5:checked ~ #photos {
animation: imgPassToRight5 30s infinite;
animation-delay: -4.8s;
}
/* animation設定 */
@keyframes imgPassToLeft0 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@keyframes imgPassToLeft1 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@keyframes imgPassToLeft2 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@keyframes imgPassToLeft3 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@keyframes imgPassToLeft4 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@keyframes imgPassToLeft5 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@keyframes imgPassToRight1 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
@keyframes imgPassToRight2 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
@keyframes imgPassToRight3 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
@keyframes imgPassToRight4 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
@keyframes imgPassToRight5 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
CSSの概略説明
・ここでは、Ie（及び最近のFirefox）向けのＣＳＳ記述になっていて、Chrome 向けには、ベンダープレフィックス(-webkit-)をつけた記述を加える必要がある。
・#photos に、#photo0-#photo1-#photo2-#photo3-#photo4-#photo5-#photo6 を水平に並べ、これを左右に移動させる事によってスライドの切り替えを行う。
・左右にスライドを送るスライドショー用の animation をそれぞれ設定する。（imgPassToLeft,imgPassToRight）
・初期には、imgPassToLeft0 でスライドショーが進行する。スライドショー用のcss記述については、他の投稿を参照のこと。
・表示されているスライドの hover で現れる左右の送りボタンのクリック(#next1:checked など)で、各ボタンにセットされている animation の再生が始まる。
・各ボタンにセットされている animation は、左、右用の二通りで、左用あるいは右用は全てに同じ記述である。ただ、各ボタンによって、animationが始まる時間を変えている。
・各ボタンがクリックされてから、次のボタンがクリックされるまでは、そのクリックされたボタンの切り替え後のスライドショーが継続再生される。