スライダー/FadeIN・Out 型(レスポンシブ)

投稿日: 作成者:
　以前投稿した「スライダー（FadeIN・Out 型）」のレスポンシブ対応型である。
　レスポンシブ対応とするために、ステージのwidth指定を、max-width としたり、スライドを格納している div の幅をスライド一枚分の100にして、position absolute の left 指定でスライドを横並びにするなどの変更を施したが、ほとんどは、以前稿通りのCodeとなっている。

サンプル（DEMO）



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

<div id="stage">
    <input type="radio" id="back1" name="gal">
    <input type="radio" id="back2" name="gal">
    <input type="radio" id="back3" class="btn" name="gal">
    <input type="radio" id="back4" class="btn" name="gal">
    <input type="radio" id="back5" class="btn" name="gal">
    <input type="radio" id="next1" class="btn" name="gal">
    <input type="radio" id="next2" class="btn" name="gal">
    <input type="radio" id="next3" class="btn" name="gal">
    <input type="radio" id="next4" class="btn" name="gal">
    <input type="radio" id="next5" class="btn" name="gal">
  <div id="photos">
      <div id="photo1" class="pic"><img src="img2/1.jpg" alt="">
        <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>
   <div style="padding:28%;"></div>
</div>

ＨＴＭＬのポイント説明

・htmlは、以前稿「スライダー（FadeIN・Out 型）」と全く同じであるが、#frame は必要ないので省略している。
・#stage内の最終行に、
　<div style="padding:28%;"></div>
　を挿入している。これは、全ての div に高さ指定がないため、表示領域の高さを確保するために記述していて、overflow:hidden; の対象領域を確保し、スライダー下部に配置された要素をスライダーの下に表示させるようにさせるものである。

本サンプル表示用ＣＳＳ

/* 表示画面 */
#stage {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
	//background:#000;
	overflow: hidden;
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの基本の animation を設定*/
#photos {
	position:absolute;
	width:100%;
	-webkit-animation: imgPassToLeft0 30s infinite;
	animation: imgPassToLeft0 30s infinite;
}
/*各写真の並び位置を設定
#photo1, #photo2, #photo3, #photo4, #photo5 */
#photo2 { left:100%; }
#photo3 { left:200%; }
#photo4 { left:300%; }
#photo5 { left:400%; }
.pic { position:absolute;top:0;width:100%; }
/*写真サイズを可変に*/
.pic img { width:100%; }
/*送りボタン文字（＜、＞）の設定*/
.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: 40%;
	color:#EEE;
}
.b_left span {
	left: 5%;
}
.b_right span {
	left: 85%;
}
/*ボタン文字hover時の設定*/
.pic:hover > label div span {
	opacity:1;
	color:#EEE;
}
.pic label div span:hover {
	color:#f00;
	cursor:pointer;
}
/* 全てのラジオボタンを非表示に */
#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
	display: none;
}
/* 各送りボタンクリック時のanimation設定 */
#next1:checked ~ #photos {
	animation: imgPassToLeft1 30s infinite;	
	animation-delay: -4.8s;
	-webkit-animation: imgPassToLeft1 30s infinite;	
	-webkit-animation-delay: -4.8s;
}
#next2:checked ~ #photos {
	animation: imgPassToLeft2 30s infinite;
	animation-delay: -10.8s;
	-webkit-animation: imgPassToLeft2 30s infinite;
	-webkit-animation-delay: -10.8s;
}
#next3:checked ~ #photos {
	animation: imgPassToLeft3 30s infinite;
	animation-delay: -16.8s;
	-webkit-animation: imgPassToLeft3 30s infinite;
	-webkit-animation-delay: -16.8s;
}
#next4:checked ~ #photos {
	animation: imgPassToLeft4 30s infinite;
	animation-delay: -22.8s;
	-webkit-animation: imgPassToLeft4 30s infinite;
	-webkit-animation-delay: -22.8s;
}
#next5:checked ~ #photos {
	animation: imgPassToLeft5 30s infinite;
	animation-delay: -28.8s;
	-webkit-animation: imgPassToLeft5 30s infinite;
	-webkit-animation-delay: -28.8s;
}
#back1:checked ~ #photos {
	animation: imgPassToRight1 30s infinite;
	animation-delay: -28.8s;
	-webkit-animation: imgPassToRight1 30s infinite;
	-webkit-animation-delay: -28.8s;
}
#back2:checked ~ #photos {
	animation: imgPassToRight2 30s infinite;
	animation-delay: -22.8s;
	-webkit-animation: imgPassToRight2 30s infinite;
	-webkit-animation-delay: -22.8s;
}
#back3:checked ~ #photos {
	animation: imgPassToRight3 30s infinite;
	animation-delay: -16.8s;
	-webkit-animation: imgPassToRight3 30s infinite;
	-webkit-animation-delay: -16.8s;
}
#back4:checked ~ #photos {
	animation: imgPassToRight4 30s infinite;
	animation-delay: -10.8s;
	-webkit-animation: imgPassToRight4 30s infinite;
	-webkit-animation-delay: -10.8s;
}
#back5:checked ~ #photos {
	animation: imgPassToRight5 30s infinite;
	animation-delay: -4.8s;
	-webkit-animation: imgPassToRight5 30s infinite;
	-webkit-animation-delay: -4.8s;
}
/* animation設定 */
@keyframes imgPassToLeft0 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft1 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft2 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft3 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft4 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft5 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToRight1 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@keyframes imgPassToRight2 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@keyframes imgPassToRight3 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@keyframes imgPassToRight4 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@keyframes imgPassToRight5 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}

@-webkit-keyframes imgPassToLeft0 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@-webkit-keyframes imgPassToLeft1 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@-webkit-keyframes imgPassToLeft2 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@-webkit-keyframes imgPassToLeft3 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@-webkit-keyframes imgPassToLeft4 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@-webkit-keyframes imgPassToLeft5 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@-webkit-keyframes imgPassToRight1 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@-webkit-keyframes imgPassToRight2 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@-webkit-keyframes imgPassToRight3 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@-webkit-keyframes imgPassToRight4 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@-webkit-keyframes imgPassToRight5 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}

ＣＳＳのポイント説明

以前稿からの変更点を中心に記述
・#stageのwidth指定を、max-width に変更
・すべての div の高さ指定を排除し、幅は、100%に指定
・#photos のwidth指定を、3000px（写真5枚分）から、100%（同1枚分） に変更
・各写真を格納している、#photo1,,,を、position absolute のtop:0、left指定で、横一列に並ぶようにした。
・送りボタン、animationの設定は、全て以前稿通り。

コメント

スライダー/FadeIN・Out 型(レスポンシブ) — 10件のコメント

  1. 良く参考にさせていただいています。
    私の自作サイトはＰＣではサンプルのようにうまくfadein/out表示されるのですが１点だけ問題があります。それは左側の前の写真に戻るボタン＜だけがなぜか表示されません。
    またスマホサイトではcssが機能せずに画像やラジオボタン、＜＞が並ぶだけです。
    お手数ですが初心者にもわかるようお答えをご教授ねがいます。

    返信 ↓

    • Takuさんこんにちは。

      　＜だけがなぜか表示されません
      なぜでしょうね。答えようがありません。＜に関連するHTMLとCSSをよく見直してください。どこかに不備があるはずです。

      　スマホサイトでもCSSは機能するはずです。スマホ向けに別にページ作りしているなら、ｃｓｓへのLINKをよく確認してください。

      返信 ↓

  2. このサイトを参考にさせてもらっている者です。質問をしたいのですが、写真の増やし方がよく分かりません。よろしければ、詳しいやり方をご教授願います。

    返信 ↓

    • 写真御枚数を増やすには、
      1)htmlで、div #photos の中に、1－5と同じ要領で記述を増やします。
      　さらに、next と back をその数だけ増やします（ラジオボタン）
      2)cssで、#photo6（left:500%）以下、その数だけ記述を加えます
      3)cssで、animationでは、totalの時間は、6*枚数秒、10枚なら60sとなります。
      　next,backのanimation-delayも6sごとになりますので、photo5以下に続くように設定する
      4)@keyframes内の記述では、100%/枚数ごとに切り替わるようにします。このサンプルでは、5枚なので、100%/5、すなわち20%ごとに切り替わるようにしています。opacity:1とopacity:1の間が表示されています。
      　この例に従って、数値を調整しながら設定してください

      以上ですが、試みてわからないことがあったら、また聞いてください。

      返信 ↓

      • 返信ありがとうございます！
        試してみたのですが、@keyframesの箇所で小数点の微調整が上手く出来ません…。試しに6枚ver.で計算してみたのですが、どう均等に100パーセントに合わせたらよいのか分かりません。誠に恐縮ではありますが、6枚ver.での@keyframesの箇所の数値を示して頂けないでしょうか？それから12枚ver.の数値も宜しければ教えて頂きたいです。お手数おかけし、申し訳ありませんがよろしくお願い致します。

        返信 ↓

        • 要は、5枚の時の%に、6枚の場合は5/6倍すればよく、小数点は1ケタ台にすればOKです。
          以下に示します。12枚の時は、さらに、1/2倍してください。
          0% { left: 0%;opacity:0;}
          3.3% { left: 0%;opacity:1;}
          13.3% { left: 0%;opacity:1;}
          16.69%{ left: 0%;opacity:0;}
          16.7% { left:-100%;opacity:0;}
          20% { left:-100%;opacity:1;}
          30% { left:-100%;opacity:1;}
          33.29%{ left:-100%;opacity:0;}
          33.3% { left:-200%;opacity:0;}
          36.7% { left:-200%;opacity:1;}
          46.7% { left:-200%;opacity:1;}
          49.99%{ left:-200%;opacity:0;}
          50% { left:-300%;opacity:0;}
          53.3% { left:-300%;opacity:1;}
          63.3% { left:-300%;opacity:1;}
          66.29%{ left:-300%;opacity:0;}
          66.6% { left:-400%;opacity:0;}
          70% { left:-400%;opacity:1;}
          80% { left:-400%;opacity:1;}
          83.29%{ left:-400%;opacity:0;}
          83.3% { left: -500%;opacity:0;}
          86.7% { left: -500%;opacity:1;}
          96.7% { left: -500%;opacity:1;}
          99.99% { left: -500%;opacity:0;}
          100% { left: 0%;opacity:0;}
          この場合は、各スライド、opacity:0から 1 1 0 に変化するとき、+0.3,+10,+0.39となる規則性を適用すればよいことになります。
          ご検討ください。

          返信 ↓

          • ありがとうございます。6枚のはそのように調整すればよいのですね。
            12枚verのを計算してみたのですが、この結果であっているでしょうか？不安なので、宜しければあっているかの確認をお願いしたいです。間違っている所がありましたら、ご指摘お願い致します。お手数おかけしますがよろしくお願い致します。
            0% { left:0%;opacity:0;}
            1.7% { left:0%;opacity:1;}
            6.7% { left:0%;opacity:1;}
            8.39% { left:0%;opacity:0;}
            8.4% { left:-100%;opacity:0;}
            10% { left:-100%;opacity:1;}
            15% { left:-100%;opacity:1;}
            16.69% { left:-100%;opacity:0;}
            16.7% { left:-200%;opacity:0;}
            18.4% { left:-200%;opacity:1;}
            23.4% { left:-200%;opacity:1;}
            24.99% { left:-200%;opacity:0;}
            25% { left:-300%;opacity:0;}
            26.7% { left:-300%;opacity:1;}
            31.7% { left:-300%;opacity:1;}
            33.29% { left:-300%;opacity:0;}
            33.3% { left:-400%;opacity:0;}
            35% { left:-400%;opacity:1;}
            40% { left:-400%;opacity:1;}
            41.69% { left:-400%;opacity:0;}
            41.7% { left:-500%;opacity:0;}
            43.4% { left:-500%;opacity:1;}
            48.4% { left:-500%;opacity:1;}
            49.99% { left:-500%;opacity:0;}
            50% { left:-600%;opacity:0;}
            51.7% { left:-600%;opacity:1;}
            56.7% { left:-600%;opacity:1;}
            58.39% { left:-600%;opacity:0;}
            58.4% { left:-700%;opacity:0;}
            60% { left:-700%;opacity:1;}
            65% { left:-700%;opacity:1;}
            66.79% { left:-700%;opacity:0;}
            66.8% { left:-800%;opacity:0;}
            68.4% { left:-800%;opacity:1;}
            73.4% { left:-800%;opacity:1;}
            75.09% { left:-800%;opacity:0;}
            75.1% { left:-900%;opacity:0;}
            76.7% { left:-900%;opacity:1;}
            81.7% { left:-900%;opacity:1;}
            83.49% { left:-900%;opacity:0;}
            83.5% { left:-1000%;opacity:0;}
            85.1% { left:-1000%;opacity:1;}
            90.1% { left:-1000%;opacity:1;}
            91.79% { left:-1000%;opacity:0;}
            91.8% { left:-1100%;opacity:0;}
            93.4% { left:-1100%;opacity:1;}
            98.4% { left:-1100%;opacity:1;}
            99.99% { left:-1100%;opacity:0;}
            100% { left:0%;opacity:0;}

            返信 ↓

  3. あっているみたいでよかったです、ありがとうございます。
    ご丁寧に指示して頂き、助かりました。
    これをもとに、打ち込んでいきたいと思います。

    返信 ↓

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です