これまで、サムネイルの数が５つの場合についてサンプルを作成してきた。もっとスライドの数が増えた場合（この例では10枚）の対処として、サムネイルが左右に移動して全部が現れるようにし、サムネイルのマウスオーバー時に、サムネイルの移動が止まるようにしたタイプのフォトギャラリーである。
もちろん、サムネイルのサイズを落としたり、サムネイルを2段に表示したりすれば解決するのだが、場合によっては、このようなスタイルもありうるのではないかと思い作成した。
サンプル（DEMO）
本サンプル表示用HTML
<div id="stage" style="clear:all;"> <img style="width:100%" src="wp-images/img/4.jpg"> <div id="photo1" class="photo"><img src="wp-images/img/1.jpg"></div> <div id="photo2" class="photo"><img src="wp-images/img/2.jpg"></div> <div id="photo3" class="photo"><img src="wp-images/img/3.jpg"></div> <div id="photo4" class="photo"><img src="wp-images/img/4.jpg"></div> <div id="photo5" class="photo"><img src="wp-images/img/5.jpg"></div> <div id="photo6" class="photo"><img src="wp-images/img/6.jpg"></div> <div id="photo7" class="photo"><img src="wp-images/img/7.jpg"></div> <div id="photo8" class="photo"><img src="wp-images/img/8.jpg"></div> <div id="photo9" class="photo"><img src="wp-images/img/9.jpg"></div> <div id="photo10" class="photo"><img src="wp-images/img/10.jpg"></div> <div style="padding:0 0 7px 0;"></div> <div id="thumbs"> <a href="#photo1"><img src="wp-images/img/s1.jpg"></a> <a href="#photo2"><img src="wp-images/img/s2.jpg"></a> <a href="#photo3"><img src="wp-images/img/s3.jpg"></a> <a href="#photo4"><img src="wp-images/img/s4.jpg"></a> <a href="#photo5"><img src="wp-images/img/s5.jpg"></a> <a href="#photo6"><img src="wp-images/img/s6.jpg"></a> <a href="#photo7"><img src="wp-images/img/s7.jpg"></a> <a href="#photo8"><img src="wp-images/img/s8.jpg"></a> <a href="#photo9"><img src="wp-images/img/s9.jpg"></a> <a href="#photo10"><img src="wp-images/img/s10.jpg"></a> </div> </div>
HTMLのポイント説明
・表示用の写真にid（photo1,photo2,,,）を付け、サムネイル画像からリンクを貼っている。
・CSSで、クリックされたサムネイルを :target で認識し該当する写真を opacity:1; で表示させる。
本サンプル表示用CSS
/*ギャラリー全体のコンテナー*/
#stage {
position: relative;
background:#ccc;
max-width: 600px;
margin: 0 auto;
overflow:hidden;
}
/*全サムネイルのコンテナー animation設定*/
#thumbs {
width: 200%;
left: -45%;
animation:recipro ease 12s infinite;
}
/*サムネイルのマウスオーバーでポインターを手のひら*/
#thumbs:hover {
animation-play-state:paused;
}
#thumbs img {
width:9.6%;
}
/*表示写真の初期配置（全部透明に）とtransition(fade)設定*/
.photo {
position: absolute;
left: 0;
top: 0;
}
.photo img {
width:100%;
opacity: 0;
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
/* クリックされたサムネイルの対応写真を表示 */
.photo:target > img {
opacity:1;
}
/* サムネイル群の左右往復animation */
@keyframes recipro {
0% { margin-left:0%; }
50% { margin-left:-98%; }
100% { margin-left:0%; }
}
CSSのポイント説明
・写真を表示させる枠の下に、サムネイルを水平に一列に並べる（#thumbs）。
・#thumbsをanimationで、左右に往復移動させる。
・#thumbsのマウスオーバーで、動きを止める（animation-play-state:paused;）。
・クリックされたサムネイルに相当する写真（.photo:target）のopacityを1にして、その写真を表示させる。
・写真の表示は、transitionの設定で、フェイドイン効果が付与される。