これまで、サムネイルの数が５つの場合についてサンプルを作成してきた。もっとスライドの数が増えた場合（この例では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の設定で、フェイドイン効果が付与される。