slider_allinone_withthumbs

HTML

<!-- スライダー部分 -->
<div id="stage">
	<input type="radio" id="f1" name="sld">
	<input type="radio" id="b1" name="sld">
	<input type="radio" id="f2" name="sld">
	<input type="radio" id="b2" name="sld">
	<input type="radio" id="f3" name="sld">
	<input type="radio" id="b3" name="sld">
	<input type="radio" id="f4" name="sld">
	<input type="radio" id="b4" name="sld">
	<input type="radio" id="f5" name="sld">
	<input type="radio" id="b5" name="sld">
	<input type="radio" id="f6" name="sld">
	<input type="radio" id="b6" name="sld">
	<input type="radio" id="t1" name="sld">
	<input type="radio" id="t2" name="sld">
	<input type="radio" id="t3" name="sld">
	<input type="radio" id="t4" name="sld">
	<input type="radio" id="t5" name="sld">
	<input type="radio" id="t6" name="sld">
<!-- 各スライドの設置（含むリンク、送りボタン） -->
  <div id="photos">
    <div id="photo0" class="photo"><img class="pimage" src="img13/6.jpg"></div>
    <div id="photo1" class="photo"><a href="#"><img class="pimage" src="img13/1.jpg"></a>
    <label for="f1"><span class="right_btn"></span></label></div>
    <div id="photo2" class="photo"><a href="#"><img class="pimage" src="img13/2.jpg"></a>
    	<label for="b2"><span class="left_btn"></span></label><label for="f2"><span class="right_btn"></span></label></div>
    <div id="photo3" class="photo"><a href="#"><img class="pimage" src="img13/3.jpg"></a>
    	<label for="b3"><span class="left_btn"></span></label><label for="f3"><span class="right_btn"></span></label></div>
    <div id="photo4" class="photo"><a href="#"><img class="pimage" src="img13/4.jpg"></a>
    	<label for="b4"><span class="left_btn"></span></label><label for="f4"><span class="right_btn"></span></label></div>
    <div id="photo5" class="photo"><a href="#"><img class="pimage" src="img13/5.jpg"></a>
    	<label for="b5"><span class="left_btn"></span></label><label for="f5"><span class="right_btn"></span></label></div>
    <div id="photo6" class="photo"><a href="#"><img class="pimage" src="img13/6.jpg"></a>
    	<label for="b6"><span class="left_btn"></span></label></div>
    <div id="photo7" class="photo"><img class="pimage" src="img13/1.jpg"></div>
  </div>
    <div style="padding-top:18%;clear:all;"></div>
<!-- サムネイルの設置 -->
  <div id="thumbs">
  	<label for="t1"><img id="thumb1" src="img13/s1.jpg"></label>
    <label for="t2"><img id="thumb2" src="img13/s2.jpg"></label>
    <label for="t3"><img id="thumb3" src="img13/s3.jpg"></label>
    <label for="t4"><img id="thumb4" src="img13/s4.jpg"></label>
    <label for="t5"><img id="thumb5" src="img13/s5.jpg"></label>
    <label for="t6"><img id="thumb6" src="img13/s6.jpg"></label>
    <img id="mark" src="img13/line.gif">
  </div>
    <div style="padding-top:3.5%;"></div>
</div>

CSS

/* ラジオボタンを非表示 
　サイトの他のhtml部分に、input文がある場合は、#f1,,,,#t6 {display:none;}と全てのラジオボタンを非表示にする*/
input { display:none; }

/* 表示領域 */
#stage { 
	position:relative;
	max-width: 100%;
	margin:0 auto;
	background: #333;
	overflow:hidden; 
}
/* 全スライド水平格納 */
#photos {
	position:absolute;
	top:0;
	width:432%;
	left:-31%;
	transition:left ease 2s;
}
/* 各スライド設定 */
.photo {
	position:absolute;
	width:12.5%;
	top:0;
	opacity:0.5;
	transition:opacity ease 1s;
}
#photo0 { left:0%; }
#photo1 { left:12.5%; }
#photo2 { left:25%; }
#photo3 { left:37.5%; }
#photo4 { left:50%; }
#photo5 { left:62.5%; }
#photo6 { left:75%; }
#photo7 { left:87.5%; }
#photo1 { opacity:1; }
.pimage {
	width:100%;
}
/* 戻り・送りボタン */
.left_btn,.right_btn { 	
	position:absolute;
	opacity:0;
}
.left_btn {
	display:block;width:50px;height:50px;left:4%;top:40%;background:url(images/back_1.png);
}
.left_btn:hover { background:url(images/back_2.png);cursor:pointer; }
.right_btn {
	display:block;width:50px;height:50px;right:5%;top:40%;background:url(images/forward_1.png);
}
.right_btn:hover { background:url(images/forward_2.png);cursor:pointer; }
/* 画像hoverで送り・戻りボタンを表示 */
#photo1:hover > label span,#photo2:hover > label span,#photo3:hover > label span,#photo4:hover > label span,#photo5:hover > label span,#photo6:hover > label span { opacity:1; }
/* サムネイル群の表示 */
#thumbs { position:absolute;width:75%;left:26%; }
#thumbs img { width:10%;position:absolute;border:#fff solid 1px; }
#thumbs img:hover {	cursor:pointer; }
#thumb1 { left:0%; }
#thumb2 { left:10.3%; }
#thumb3 { left:20.6%; }
#thumb4 { left:30.9%; }
#thumb5 { left:41.2%; }
#thumb6 { left:51.5%; }
/* マーキングバー */
#mark { 
	position:absolute; left:0%;top:-3px;
	transition:left ease 1.5s;
}
/* サムネイルクリック時のスライド及びマーキングバーのtransition値 */
#t1:checked ~ #photos { left:-31%; }
#t2:checked ~ #photos { left:-85%; }
#t3:checked ~ #photos { left:-139%; }
#t4:checked ~ #photos { left:-193%; }
#t5:checked ~ #photos { left:-247%; }
#t6:checked ~ #photos { left:-301%; }
#t1:checked ~ #photos #photo1,#t2:checked ~ #photos #photo2,#t3:checked ~ #photos #photo3,#t4:checked ~ #photos #photo4,
#t5:checked ~ #photos #photo5,#t6:checked ~ #photos #photo6 { opacity:1; }
#t2:checked ~ #photos #photo1,#t3:checked ~ #photos #photo1,#t4:checked ~ #photos #photo1,#t5:checked ~ #photos #photo1,
#t6:checked ~ #photos #photo1 {	opacity:0.5; }
#t1:checked ~ #thumbs #mark { left: 0%; }
#t2:checked ~ #thumbs #mark { left: 10.3%; }
#t3:checked ~ #thumbs #mark { left: 20.6%; }
#t4:checked ~ #thumbs #mark { left: 30.9%; }
#t5:checked ~ #thumbs #mark { left: 41.2%; }
#t6:checked ~ #thumbs #mark { left: 51.5%; }
/* 送り・戻りボタンクリック時のスライド及びマーキングバーのtransition値 */
#f1:checked ~ #photos { left:-85%; }
#f2:checked ~ #photos { left:-139%; }
#f3:checked ~ #photos { left:-193%; }
#f4:checked ~ #photos { left:-247%; }
#f5:checked ~ #photos { left:-301%; }
#b2:checked ~ #photos { left:-31%; }
#b3:checked ~ #photos { left:-85%; }
#b4:checked ~ #photos { left:-139%; }
#b5:checked ~ #photos { left:-193%; }
#b6:checked ~ #photos { left:-247%; }
#b7:checked ~ #photos { left:-301%; }
#f1:checked ~ #photos #photo2,#f2:checked ~ #photos #photo3,#f3:checked ~ #photos #photo4,#f4:checked ~ #photos #photo5,#f5:checked ~ #photos #photo6,
#b2:checked ~ #photos #photo1,#b3:checked ~ #photos #photo2,#b4:checked ~ #photos #photo3,#b5:checked ~ #photos #photo4,#b6:checked ~ #photos #photo5 { opacity:1; }
#f1:checked ~ #photos #photo1,#f2:checked ~ #photos #photo1,#f3:checked ~ #photos #photo1,#f4:checked ~ #photo1,#f5:checked ~ #photos #photo1,
#b3:checked ~ #photos #photo1,#b4:checked ~ #photos #photo1,#b5:checked ~ #photos #photo1,#b6:checked ~ #photos #photo1 { opacity:0.5 }
#f1:checked ~ #thumbs #mark { left: 10.3%; }
#f2:checked ~ #thumbs #mark { left: 20.6%; }
#f3:checked ~ #thumbs #mark { left: 30.9%; }
#f4:checked ~ #thumbs #mark { left: 41.2%; }
#f5:checked ~ #thumbs #mark { left: 51.5%; }
#b2:checked ~ #thumbs #mark { left: 0%; }
#b3:checked ~ #thumbs #mark { left: 10.3%; }
#b4:checked ~ #thumbs #mark { left: 20.6%; }
#b5:checked ~ #thumbs #mark { left: 30.9%; }
#b6:checked ~ #thumbs #mark { left: 41.2%; }