スライドイン・アウト型スライドショー（レスポンシブ）

以前に示した「スライドイン・アウト型」をレスポンシブ対応にしたものである。
先の投稿、「フェイドイン・アウト型スライドショー（レスポンシブ）」に続くレスポンシブ対応スライドショーの第二弾である。

レスポンシブ対応スライドイン・アウト型のサンプル

本サンプル表示用ＨＴＭＬ

<div id="stage">
      <div id="photo1" class="pic"><img src="img2/1.jpg"></div>
      <div id="photo2" class="pic"><img src="img2/2.jpg"></div>
      <div id="photo3" class="pic"><img src="img2/3.jpg"></div>
      <div id="photo4" class="pic"><img src="img2/4.jpg"></div>
      <div id="photo5" class="pic"><img src="img2/5.jpg"></div>
      <div style="padding:28%;background:transparent;"></div>
</div>

HTMLのポイント説明

・<div style=”padding:28%;”></div> は、画像表示域を確保するために設置たもので、css の overflow:hidden; の対象領域ともいえる。
　28％は、画像の高さ/幅/2 で計算したもので、画像サイズによって調整が必要である。
　transparentはスライドショーを置く場所によって必要となる場合がある。

本サンプル表示用ＣＳＳ

#stage {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
	overflow: hidden;
}
.pic img {
	position:absolute;
	width: 100%;
	top:0;
	left:100%;
	-moz-animation: imgTrans 30s infinite;
	-webkit-animation: imgTrans 30s infinite;
	animation: imgTrans 30s infinite;
}
#photo1 img {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#photo2 img {
	-moz-animation-delay: 6s;
	-webkit-animation-delay: 6s;
	animation-delay: 6s;
}
#photo3 img {
	-moz-animation-delay: 12s;
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
}
#photo4 img {
	-moz-animation-delay: 18s;
	-webkit-animation-delay: 18s;
	animation-delay: 18s;
}
#photo5 img {
	-moz-animation-delay: 24s;
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}
@-webkit-keyframes imgTrans {
 0% { left:100%; }
 5% { left:0%; }
 20% { left:0%; }
 25% { left:-100%; }
 100% { left:-100%; }
}
@-moz-keyframes imgTrans {
 0% { left:100%; }
 5% { left:0%; }
 20% { left:0%; }
 25% { left:-100%; }
 100% { left:-100%; }
}

@keyframes imgTrans {
 0% { left:100%; }
 5% { left:0%; }
 20% { left:0%; }
 25% { left:-100%; }
 100% { left:-100%; }
}

ＣＳＳのポイント説明

・#stageのwidth指定を、max-width にする。
・画像（img）のwidthを100%、初期配置をleft:100%;に設定する。
・imgにanimationを付与する。（レスポンシブ非対応型の場合に配置した#frameは省略した）