HTML

<div id="stage">
  <!-- 順送りボタン用ラジオボタン -->
    <input type="radio" id="back1" name="gal">
    <input type="radio" id="back2" name="gal">
    <input type="radio" id="back3" name="gal">
    <input type="radio" id="back4" name="gal">
    <input type="radio" id="back5" name="gal">
    <input type="radio" id="next1" name="gal">
    <input type="radio" id="next2" name="gal">
    <input type="radio" id="next3" name="gal">
    <input type="radio" id="next4" name="gal">
    <input type="radio" id="next5" name="gal">
  <!-- 表示ボタン用ラジオボタン -->
    <input type="radio" id="r1" name="gal">
    <input type="radio" id="r2" name="gal">
    <input type="radio" id="r3" name="gal">
    <input type="radio" id="r4" name="gal">
    <input type="radio" id="r5" name="gal">
  <!-- スライド(写真)を横に連ねた帯・各スライドに左右送りボタン -->
  <div id="photos">
      <div id="photo0" class="pic"><img src="img12/m5.jpg"></div>
      <div id="photo1" class="pic"><img src="img12/m1.jpg">
	    <label for="back1"><div id="left1" class="b_left"></div></label> 
	    <label for="next1"><div id="right1" class="b_right"></div></label>
      </div>
      <div id="photo2" class="pic"><img src="img12/m2.jpg">
	    <label for="back2"><div id="left2" class="b_left"></div></label>
    	<label for="next2"><div id="right2" class="b_right"></div></label>
      </div>
      <div id="photo3" class="pic"><img src="img12/m3.jpg">
	    <label for="back3"><div id="left3" class="b_left"></div></label>
    	<label for="next3"><div id="right3" class="b_right"></div></label>        
      </div>
      <div id="photo4" class="pic"><img src="img12/m4.jpg">
    	<label for="back4"><div id="left4" class="b_left"></div></label>
    	<label for="next4"><div id="right4" class="b_right"></div></label>
      </div>
      <div id="photo5" class="pic"><img src="img12/m5.jpg">
    	<label for="back5"><div id="left5" class="b_left"></div></label>
    	<label for="next5"><div id="right5" class="b_right"></div></label>
      </div>
      <div id="photo6" class="pic"><img src="img12/m1.jpg">
      </div>
  </div>
  <!-- スライド位置表示ボタン -->
  <div id="btn_band">
      	<div id="order1" class="order">
  			<label for="r1" class="circ"><img src="images/trbtn_1.gif"></label>
        </div>
      	<div id="order2" class="order">
  			<label for="r2" class="circ"><img src="images/trbtn_1.gif"></label>
        </div>
      	<div id="order3" class="order">
  			<label for="r3" class="circ"><img src="images/trbtn_1.gif"></label>
        </div>
      	<div id="order4" class="order">
  			<label for="r4" class="circ"><img src="images/trbtn_1.gif"></label>
        </div>
      	<div id="order5" class="order">
  			<label for="r5" class="circ"><img src="images/trbtn_1.gif"></label>
        </div>
        <div id="slide_position"><img src="images/trbtn_2.gif"></div>
  </div>
</div>
<div style="padding-top:20%;"></div>

CSS

/* 表示画面 */
html,body { margin:0; padding:0; } /* 追加 */
#stage {
	position: relative;
	width: 100%;
	/* overflow: hidden; 削除 */
	background:#777;
}
/* 全てのラジオボタンを非表示に */
#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5,#r1,#r2,#r3,#r4,#r5{
	display: none;
}
/*全ての写真を水平一列に格納したdiv、#photosに,スライドショーの animation を設定*/
#photos {
	position:absolute;
	top:0;
	width:100%;
	animation: imgPassToLeft0 30s infinite;
}
/*各写真の並び位置を設定 */
#photo0 { left:  0%; }
#photo1 { left:100%; } 
#photo2 { left:200%; }
#photo3 { left:300%; }
#photo4 { left:400%; }
#photo5 { left:500%; }
#photo6 { left:600%; }
.pic { position:absolute;top:0;width:100%; }
/*写真サイズ・位置ボタンサイズを可変に*/
.pic img:nth-child(1) { width:100%; }
.order { float:left; }
.order img { width:110%; }
@media screen and (max-width: 640px) {
	.order img { width:80%; }
	#slide_position img { width:80%; }
}
/* 位置表示ボタン */
#btn_band {
	/*position:relative;
	width:100px;
	margin:0 auto;
	margin-top:18%; 以上を以下に変更 */
position:absolute;
width:100px;
left:45%;
padding-top:19%;/* 数値は画像サイズに応じて適切に変更する */ } #slide_position { position:absolute;left:0; animation:orderToLeft0 30s infinite; } .circ:hover { cursor:pointer; } /* 位置表示ボタンクリック時のanimation設定 */ #r1:checked ~ #photos { animation: imgPassToLeft1 30s infinite; animation-delay: -28.8s;} #r2:checked ~ #photos { animation: imgPassToLeft2 30s infinite; animation-delay: -4.8s;} #r3:checked ~ #photos { animation: imgPassToLeft3 30s infinite; animation-delay: -10.8s;} #r4:checked ~ #photos { animation: imgPassToLeft4 30s infinite; animation-delay: -16.8s;} #r5:checked ~ #photos { animation: imgPassToLeft5 30s infinite; animation-delay: -22.8s;} #r1:checked ~ #btn_band #slide_position { animation:orderToLeft1 30s infinite; animation-delay: -28.8s; } #r2:checked ~ #btn_band #slide_position { animation:orderToLeft2 30s infinite; animation-delay: -4.8s; } #r3:checked ~ #btn_band #slide_position { animation:orderToLeft3 30s infinite; animation-delay: -10.8s; } #r4:checked ~ #btn_band #slide_position { animation:orderToLeft4 30s infinite; animation-delay: -16.8s; } #r5:checked ~ #btn_band #slide_position { animation:orderToLeft5 30s infinite; animation-delay: -22.8s; } /*送りボタン文字(<、>)の設定*/ .b_left, .b_right { position: absolute; top: 40%; opacity:0; } .b_left { left: 3%;height:15%;width:10%; background-image:url(images/back_1.png); background-repeat: no-repeat; background-size:contain; } .b_right { left: 95%;height:15%;width:10%; background-image:url(images/forward_1.png); background-repeat: no-repeat; background-size:contain; } .b_left:hover { background-image:url(images/back_2.png); } .b_right:hover { background-image:url(images/forward_2.png); } /*ボタン文字hover時の設定*/ .pic:hover > label div { opacity:1; } .pic label div:hover { cursor:pointer; } /* 右送りボタンクリック時のanimation設定 */ #next1:checked ~ #photos { animation: imgPassToLeft1 30s infinite; animation-delay: -4.8s; } #next2:checked ~ #photos { animation: imgPassToLeft2 30s infinite; animation-delay: -10.8s; } #next3:checked ~ #photos { animation: imgPassToLeft3 30s infinite; animation-delay: -16.8s; } #next4:checked ~ #photos { animation: imgPassToLeft4 30s infinite; animation-delay: -22.8s; } #next5:checked ~ #photos { animation: imgPassToLeft5 30s infinite; animation-delay: -28.8s; } #next1:checked ~ #btn_band #slide_position { animation:orderToLeft2 30s infinite; animation-delay: -4.8s; } #next2:checked ~ #btn_band #slide_position { animation:orderToLeft3 30s infinite; animation-delay: -10.8s; } #next3:checked ~ #btn_band #slide_position { animation:orderToLeft4 30s infinite; animation-delay: -16.8s; } #next4:checked ~ #btn_band #slide_position { animation:orderToLeft5 30s infinite; animation-delay: -22.8s; } #next5:checked ~ #btn_band #slide_position { animation:orderToLeft1 30s infinite; animation-delay: -28.8s; } /* 左送りボタンクリック時のanimation設定 */ #back1:checked ~ #photos { animation: imgPassRight1 30s infinite; animation-delay: 1s; } #back1:checked ~ #photos { animation: imgPassToRight1 30s infinite; animation-delay: -28.8s; } #back2:checked ~ #photos { animation: imgPassToRight2 30s infinite; animation-delay: -22.8s; } #back3:checked ~ #photos { animation: imgPassToRight3 30s infinite; animation-delay: -16.8s; } #back4:checked ~ #photos { animation: imgPassToRight4 30s infinite; animation-delay: -10.8s; } #back5:checked ~ #photos { animation: imgPassToRight5 30s infinite; animation-delay: -4.8s; } #back1:checked ~ #btn_band #slide_position { animation:orderToRight5 30s infinite; animation-delay: -4.8s; } #back2:checked ~ #btn_band #slide_position { animation:orderToRight4 30s infinite; animation-delay: -28.8s; } #back3:checked ~ #btn_band #slide_position { animation:orderToRight3 30s infinite; animation-delay: -22.8s; } #back4:checked ~ #btn_band #slide_position { animation:orderToRight2 30s infinite; animation-delay: -16.8s; } #back5:checked ~ #btn_band #slide_position { animation:orderToRight1 30s infinite; animation-delay: -10.8s; } /* スライド移動animation設定 */ @keyframes imgPassToLeft0 { 0% { left:-100%; } 16% { left:-100%; } 20% { left:-200%; } 36% { left:-200%; } 40% { left:-300%; } 56% { left:-300%; } 60% { left:-400%; } 76% { left:-400%; } 80% { left:-500%; } 96% { left:-500%; } 100% { left:-600%; } } @keyframes imgPassToLeft1 { 0% { left:-100%; } 16% { left:-100%; } 20% { left:-200%; } 36% { left:-200%; } 40% { left:-300%; } 56% { left:-300%; } 60% { left:-400%; } 76% { left:-400%; } 80% { left:-500%; } 96% { left:-500%; } 100% { left:-600%; } } @keyframes imgPassToLeft2 { 0% { left:-100%; } 16% { left:-100%; } 20% { left:-200%; } 36% { left:-200%; } 40% { left:-300%; } 56% { left:-300%; } 60% { left:-400%; } 76% { left:-400%; } 80% { left:-500%; } 96% { left:-500%; } 100% { left:-600%; } } @keyframes imgPassToLeft3 { 0% { left:-100%; } 16% { left:-100%; } 20% { left:-200%; } 36% { left:-200%; } 40% { left:-300%; } 56% { left:-300%; } 60% { left:-400%; } 76% { left:-400%; } 80% { left:-500%; } 96% { left:-500%; } 100% { left:-600%; } } @keyframes imgPassToLeft4 { 0% { left:-100%; } 16% { left:-100%; } 20% { left:-200%; } 36% { left:-200%; } 40% { left:-300%; } 56% { left:-300%; } 60% { left:-400%; } 76% { left:-400%; } 80% { left:-500%; } 96% { left:-500%; } 100% { left:-600%; } } @keyframes imgPassToLeft5 { 0% { left:-100%; } 16% { left:-100%; } 20% { left:-200%; } 36% { left:-200%; } 40% { left:-300%; } 56% { left:-300%; } 60% { left:-400%; } 76% { left:-400%; } 80% { left:-500%; } 96% { left:-500%; } 100% { left:-600%; } } @keyframes imgPassToRight1 { 0% { left:-500%; } 16% { left:-500%; } 20% { left:-400%; } 36% { left:-400%; } 40% { left:-300%; } 56% { left:-300%; } 60% { left:-200%; } 76% { left:-200%; } 80% { left:-100%; } 96% { left:-100%; } 100% { left:0%; } } @keyframes imgPassToRight2 { 0% { left:-500%; } 16% { left:-500%; } 20% { left:-400%; } 36% { left:-400%; } 40% { left:-300%; } 56% { left:-300%; } 60% { left:-200%; } 76% { left:-200%; } 80% { left:-100%; } 96% { left:-100%; } 100% { left:0%; } } @keyframes imgPassToRight3 { 0% { left:-500%; } 16% { left:-500%; } 20% { left:-400%; } 36% { left:-400%; } 40% { left:-300%; } 56% { left:-300%; } 60% { left:-200%; } 76% { left:-200%; } 80% { left:-100%; } 96% { left:-100%; } 100% { left:0%; } } @keyframes imgPassToRight4 { 0% { left:-500%; } 16% { left:-500%; } 20% { left:-400%; } 36% { left:-400%; } 40% { left:-300%; } 56% { left:-300%; } 60% { left:-200%; } 76% { left:-200%; } 80% { left:-100%; } 96% { left:-100%; } 100% { left:0%; } } @keyframes imgPassToRight5 { 0% { left:-500%; } 16% { left:-500%; } 20% { left:-400%; } 36% { left:-400%; } 40% { left:-300%; } 56% { left:-300%; } 60% { left:-200%; } 76% { left:-200%; } 80% { left:-100%; } 96% { left:-100%; } 100% { left:0%; } } /* 位置表示ボタン移動animation設定 */ @keyframes orderToLeft0 { 0% { left: 0; opacity:1;} 16% { left: 0; opacity:1; } 16.1% { opacity:0; } 19% { opacity:0; } 20% { left:20%; opacity:1; } 36% { left:20%; opacity:1; } 36.1% { opacity:0; } 39% { opacity:0; } 40% { left:40%; opacity:1; } 56% { left:40%; opacity:1; } 56.1% { opacity:0; } 59% { opacity:0; } 60% { left:60%; opacity:1; } 76% { left:60%; opacity:1; } 76.1% { opacity:0; } 79% { opacity:0; } 80% { left:80%; opacity:1; } 96% { left:80%; opacity:1; } 96.1% { opacity:0; } 99% { opacity:0; } 100% { left:0%; opacity:1; } } @keyframes orderToLeft1 { 0% { left: 0; opacity:1;} 16% { left: 0; opacity:1; } 16.1% { opacity:0; } 19% { opacity:0; } 20% { left:20%; opacity:1; } 36% { left:20%; opacity:1; } 36.1% { opacity:0; } 39% { opacity:0; } 40% { left:40%; opacity:1; } 56% { left:40%; opacity:1; } 56.1% { opacity:0; } 59% { opacity:0; } 60% { left:60%; opacity:1; } 76% { left:60%; opacity:1; } 76.1% { opacity:0; } 79% { opacity:0; } 80% { left:80%; opacity:1; } 96% { left:80%; opacity:1; } 96.1% { opacity:0; } 99% { opacity:0; } 100% { left:0%; opacity:1; } } @keyframes orderToLeft2 { 0% { left: 0; opacity:1;} 16% { left: 0; opacity:1; } 16.1% { opacity:0; } 19% { opacity:0; } 20% { left:20%; opacity:1; } 36% { left:20%; opacity:1; } 36.1% { opacity:0; } 39% { opacity:0; } 40% { left:40%; opacity:1; } 56% { left:40%; opacity:1; } 56.1% { opacity:0; } 59% { opacity:0; } 60% { left:60%; opacity:1; } 76% { left:60%; opacity:1; } 76.1% { opacity:0; } 79% { opacity:0; } 80% { left:80%; opacity:1; } 96% { left:80%; opacity:1; } 96.1% { opacity:0; } 99% { opacity:0; } 100% { left:0%; opacity:1; } } @keyframes orderToLeft3 { 0% { left: 0; opacity:1;} 16% { left: 0; opacity:1; } 16.1% { opacity:0; } 19% { opacity:0; } 20% { left:20%; opacity:1; } 36% { left:20%; opacity:1; } 36.1% { opacity:0; } 39% { opacity:0; } 40% { left:40%; opacity:1; } 56% { left:40%; opacity:1; } 56.1% { opacity:0; } 59% { opacity:0; } 60% { left:60%; opacity:1; } 76% { left:60%; opacity:1; } 76.1% { opacity:0; } 79% { opacity:0; } 80% { left:80%; opacity:1; } 96% { left:80%; opacity:1; } 96.1% { opacity:0; } 99% { opacity:0; } 100% { left:0%; opacity:1; } } @keyframes orderToLeft4 { 0% { left: 0; opacity:1;} 16% { left: 0; opacity:1; } 16.1% { opacity:0; } 19% { opacity:0; } 20% { left:20%; opacity:1; } 36% { left:20%; opacity:1; } 36.1% { opacity:0; } 39% { opacity:0; } 40% { left:40%; opacity:1; } 56% { left:40%; opacity:1; } 56.1% { opacity:0; } 59% { opacity:0; } 60% { left:60%; opacity:1; } 76% { left:60%; opacity:1; } 76.1% { opacity:0; } 79% { opacity:0; } 80% { left:80%; opacity:1; } 96% { left:80%; opacity:1; } 96.1% { opacity:0; } 99% { opacity:0; } 100% { left:0%; opacity:1; } } @keyframes orderToLeft5 { 0% { left: 0; opacity:1;} 16% { left: 0; opacity:1; } 16.1% { opacity:0; } 19% { opacity:0; } 20% { left:20%; opacity:1; } 36% { left:20%; opacity:1; } 36.1% { opacity:0; } 39% { opacity:0; } 40% { left:40%; opacity:1; } 56% { left:40%; opacity:1; } 56.1% { opacity:0; } 59% { opacity:0; } 60% { left:60%; opacity:1; } 76% { left:60%; opacity:1; } 76.1% { opacity:0; } 79% { opacity:0; } 80% { left:80%; opacity:1; } 96% { left:80%; opacity:1; } 96.1% { opacity:0; } 99% { opacity:0; } 100% { left:0%; opacity:1; } } @keyframes orderToRight1 { 0% { left: 0; opacity:1;} 16% { left: 0; opacity:1; } 16.1% { opacity:0; } 19% { opacity:0; } 20% { left:80%; opacity:1; } 36% { left:80%; opacity:1; } 36.1% { opacity:0; } 39% { opacity:0; } 40% { left:60%; opacity:1; } 56% { left:60%; opacity:1; } 56.1% { opacity:0; } 59% { opacity:0; } 60% { left:40%; opacity:1; } 76% { left:40%; opacity:1; } 76.1% { opacity:0; } 79% { opacity:0; } 80% { left:20%; opacity:1; } 96% { left:20%; opacity:1; } 96.1% { opacity:0; } 99% { opacity:0; } 100% { left:0%; opacity:1; } } @keyframes orderToRight2 { 0% { left: 0; opacity:1;} 16% { left: 0; opacity:1; } 16.1% { opacity:0; } 19% { opacity:0; } 20% { left:80%; opacity:1; } 36% { left:80%; opacity:1; } 36.1% { opacity:0; } 39% { opacity:0; } 40% { left:60%; opacity:1; } 56% { left:60%; opacity:1; } 56.1% { opacity:0; } 59% { opacity:0; } 60% { left:40%; opacity:1; } 76% { left:40%; opacity:1; } 76.1% { opacity:0; } 79% { opacity:0; } 80% { left:20%; opacity:1; } 96% { left:20%; opacity:1; } 96.1% { opacity:0; } 99% { opacity:0; } 100% { left:0%; opacity:1; } } @keyframes orderToRight3 { 0% { left: 0; opacity:1;} 16% { left: 0; opacity:1; } 16.1% { opacity:0; } 19% { opacity:0; } 20% { left:80%; opacity:1; } 36% { left:80%; opacity:1; } 36.1% { opacity:0; } 39% { opacity:0; } 40% { left:60%; opacity:1; } 56% { left:60%; opacity:1; } 56.1% { opacity:0; } 59% { opacity:0; } 60% { left:40%; opacity:1; } 76% { left:40%; opacity:1; } 76.1% { opacity:0; } 79% { opacity:0; } 80% { left:20%; opacity:1; } 96% { left:20%; opacity:1; } 96.1% { opacity:0; } 99% { opacity:0; } 100% { left:0%; opacity:1; } } @keyframes orderToRight4 { 0% { left: 0; opacity:1;} 16% { left: 0; opacity:1; } 16.1% { opacity:0; } 19% { opacity:0; } 20% { left:80%; opacity:1; } 36% { left:80%; opacity:1; } 36.1% { opacity:0; } 39% { opacity:0; } 40% { left:60%; opacity:1; } 56% { left:60%; opacity:1; } 56.1% { opacity:0; } 59% { opacity:0; } 60% { left:40%; opacity:1; } 76% { left:40%; opacity:1; } 76.1% { opacity:0; } 79% { opacity:0; } 80% { left:20%; opacity:1; } 96% { left:20%; opacity:1; } 96.1% { opacity:0; } 99% { opacity:0; } 100% { left:0%; opacity:1; } } @keyframes orderToRight5 { 0% { left: 0; opacity:1;} 16% { left: 0; opacity:1; } 16.1% { opacity:0; } 19% { opacity:0; } 20% { left:80%; opacity:1; } 36% { left:80%; opacity:1; } 36.1% { opacity:0; } 39% { opacity:0; } 40% { left:60%; opacity:1; } 56% { left:60%; opacity:1; } 56.1% { opacity:0; } 59% { opacity:0; } 60% { left:40%; opacity:1; } 76% { left:40%; opacity:1; } 76.1% { opacity:0; } 79% { opacity:0; } 80% { left:20%; opacity:1; } 96% { left:20%; opacity:1; } 96.1% { opacity:0; } 99% { opacity:0; } 100% { left:0%; opacity:1; } }