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

　このサイトの閲覧者の方から、画面サイズに対応して画像が縮小する、いわゆるレスポンシブ型にできないものかとの質問を受けました。確かに最近ではスマホ対応にしないことには、一人前にあらずということですから、以前に投稿した「フェイドイン・アウト型スライドショー」を例に、レスポンシブにしてみました。

サンプル

本サンプル表示用HTML

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

HTMLのポイント説明

・このスライドショーの下に何か記述とか、他の要素を加えたい場合には、画像にposition:absoluteが指定されているため、スライドショーと、下の要素が重なってしまいます。
　そこで、下の要素がスライドショー画像の下に表示されるように、<div style=”padding:28%;”></div>を画像タグの下に挿入します。28%は、画像の縦/横比の1/2から決めた値です。画像サイズによって調整してください。

本サンプル表示用CSS

#stage {
position: relative;
max-width:600px;
margin: 0 auto;
background:#ddd;
}
.pic {
position: absolute;
}
.pic img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 40s infinite;
-webkit-animation: imgTrans 40s ease-in infinite;
animation: imgTrans 40s infinite;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
#photo3 img {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
#photo4 img{
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
animation-delay: 24s;
}
#photo5 img {
-moz-animation-delay: 32s;
-webkit-animation-delay: 32s;
animation-delay: 32s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}

CSSのポイント説明

・「フェイドイン・アウト型スライドショー」との違いは、以下です。
　#stage のwidthの指定を、max-width: としてheightは指定していない。
　img のwidth指定を100％、height指定をauto としている。
　#frameは削除している。
・画像にリンクを貼りたい場合は、@keyframes の7%に、
　z-index:20; を追加する。