左右写真送り型スライダー

tyosbb

11年前

表示写真の右側にマウスをのせると右側の送りボタンが表示され、クリックで右側から写真が入ってくると同時に表示されている写真が左側に退場するタイプのフォトギャラリーというか、スライダーである。逆の左側も同様の操作が可能である。

サンプル

本サンプル表示用HTML

HTMLの概要説明

・左右4つずつの送りボタン用ラジオボタンを配置する。
　（1枚目のスライドには左送りボタンが、最後のスライドには右送りボタンがない）
・左送りボタンは、label として、cover_left（幅200px、高さ100%で画面左に配置）の中に配置し、
cover_leftにマウスがのった時にイベントが発生するようにする。
・右送りボタンについても、左ボタンと同様に画面右に配置する。
・各スライドは、css で、div Photosの中に水平一列に順次並ばせ、photos 全体を transition で移動させる。

本サンプル表示用CSS


/*全体のコンテナー*/
#stage {
	position: relative;
	width: 600px;
	height: 340px;
	margin: 0 auto;
	overflow:hidden;
}
/*全てのラジオボタンを非表示に*/
#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
	display: none;
}
/*全ての写真を水平一列に格納したdiv、#photosにtransitionを設定*/
#photos {
	position:absolute;
	top:0;
        width:3000px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
/*各写真の並び位置を設定*/
#photo1, #photo2, #photo3, #photo4, #photo5 {
	position:relative;
	float:left;
}
/*ボタン領域の設定*/
.cover_left, .cover_right {
	position:absolute;
	top:0;
	width:200px;
	height:348px;
	display:none;
	cursor:pointer;
	z-index:101;
}
.cover_left {
	left:0;
}
.cover_right {
	left:400px;
}
/*ボタン領域内のボタン文字（＜、＞）の設定*/
.cover_left span, .cover_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: 140px;
}
.cover_left span {
	left: 10px;	
}
.cover_right span {
	left: 160px
}
/*ボタン領域hover時文字の設定*/
.cover_right:hover > span,.cover_left:hover > span {
	opacity:1;
	color:#EEE;
}
#right1,#right2,#right3,#right4,#left2,#left3,#left4,#left5 {
	display:none;
}
/*各ボタン領域がクリックされた時の#photosの行き先位置の設定*/
#back2:checked ~ #photos { left:0; }
#back3:checked ~ #photos,#next1:checked ~ #photos { left:-600px; }
#back4:checked ~ #photos,#next2:checked ~ #photos { left:-1200px; }
#back5:checked ~ #photos,#next3:checked ~ #photos { left:-1800px; }
#next4:checked ~ #photos { left:-2400px; }
/*ボタン領域クリック時に前表示域を消し切り替え後の表示域を表示*/
#back2:checked ~ #n_btn label #right1 { display:block; }
#back3:checked ~ #b_btn label #left2,#back3:checked ~ #n_btn label #right2 { display:block; }
#back4:checked ~ #b_btn label #left3,#back4:checked ~ #n_btn label #right3 { display:block; }
#back5:checked ~ #b_btn label #left4,#back5:checked ~ #n_btn label #right4 { display:block; }
#next1:checked ~ #b_btn label #left2,#next1:checked ~ #n_btn label #right2 { display:block; }
#next2:checked ~ #b_btn label #left3,#next2:checked ~ #n_btn label #right3 { display:block; }
#next3:checked ~ #b_btn label #left4,#next3:checked ~ #n_btn label #right4 { display:block; }
#next4:checked ~ #b_btn label #left5 { display:block; }

CSSのポイント説明

・全てのスライド（写真 photo1,,,photo5）を #photos の中に水平に並べ、photo1が画面中央になるように配置する。
・#photos に transition を設定し、ラジオボタン（ボタン領域）がクリックされた時に所定の位置に移動するようにする。
　例えば、#back3あるいは#next1がチェックされたら、-600pxに移動し、2枚目のスライドを表示する。
　#back3:checked ~ #photos,#next1:checked ~ #photos { left:-600px; }
・各スライドごとに、スライドを送るためのボタン領域をlabelとして左右に配置し、ラジオボタンと関連付ける。
・右ボタン領域の中に、＞を、左ボタン領域の中に、＜　を配置し、指標とする。
・初期においては、全てのラジオボタン、全てのボタン領域を非表示にしておく。
（ページが開くと、#back2がチェックされ(2枚目のスライド表示時の左ボタン領域がクリックされた状態)、一枚目のスライドが表示される。
・送りボタンがクリックされたら、表示されるスライド番号のボタン領域を左右に表示するようにし、次のクリックを待ち受ける。
例えば、3枚目のスライドで戻り送りボタンがクリックされた場合、2枚目のスライドが表示され、#left2,#right2 が表示される。
　#back3:checked ~ #b_btn label #left2,#back3:checked ~ #n_btn label #right2 { display:block; }