jQuery 要素のスライド

複数のテキストや画像を並べて表示する場合、そのまま並べてしまうと画面が埋まってしまいます。

そんな時のサンプルです。

高さや幅を固定して、はみ出す部分を隠し、ボタンを押すとアニメーションでひとつずつ表示します。

ボックスの数と横幅の値を取得し、どんなサイズでも最初から最後までで止まります。

横幅が％指定なので、スマホの場合だと横幅に合わせ、見えている部分が狭まります。

以下がjQuery部分の上部です。

ボックスの横幅やマージンの値を取得し、一つ分の幅でアニメーションを実行します。

連打防止や押せる状態に見せるクラスの操作をしています。

item_size = parseInt($(".box_in").find(".item").css('width'), 10);
	item_margin_l = parseInt($(".box_in").find(".item").css('margin-left'), 10);
	item_margin_r = parseInt($(".box_in").find(".item").css('margin-right'), 10);

	size = item_size+item_margin_l+item_margin_r;


	$(".btn_l").on('click', function() {
		//戻る
		item_cnt = $(this).parent().find(".item").length;
		l = parseInt($(this).parent().find(".box_in").css('left'), 10);
		ll = l+size;
		if(l < 0){
			if(l % size == 0){
				$(this).parent().find(".box_in").animate({ left:ll+"px"}, 500);
				$(this).parent().find(".btn_r").addClass("act");
				if(0 == ll){
					$(this).removeClass("act");
				}
			}
		}
	});
	$(".btn_r").on('click', function() {
		//進む
		item_cnt = $(this).parent().find(".item").length;
		min_left = 0 - (item_cnt - 1) * size;
		l = parseInt($(this).parent().find(".box_in").css('left'), 10);
		ll = l-size;
		if(l > min_left){
			if(l % size == 0){
				$(this).parent().find(".box_in").animate({ left:ll+"px"}, 500);
				$(this).parent().find(".btn_l").addClass("act");
				if(min_left == ll){
					$(this).removeClass("act");
				}
			}
		}
	});

以下はスワイプに対応する部分、ほぼクリックと同じ内容です。

		$('.box_out').on('touchstart', onTouchStart); //指が触れたか検知
		$('.box_out').on('touchmove', onTouchMove); //指が動いたか検知
		$('.box_out').on('touchend', onTouchEnd); //指が離れたか検知
		var direction, position;

		//スワイプ開始時の横方向の座標を格納
		function onTouchStart(event) {
			position = getPosition(event);
			direction = ''; //一度リセットする
		}

		//スワイプの方向（left／right）を取得
		function onTouchMove(event) {
			if (position - getPosition(event) > 70) { // 70px以上移動しなければスワイプと判断しない
				direction = 'left'; //左と検知
			} else if (position - getPosition(event) < -70){ // 70px以上移動しなければスワイプと判断しない
				direction = 'right'; //右と検知
			}
		}

		function onTouchEnd(event) {
			if (direction == 'right'){//右へスワイプ 戻る

				item_cnt = $(this).parent().find(".item").length;
				l = parseInt($(this).parent().find(".box_in").css('left'), 10);
				ll = l+size;
				if(l < 0){
					if(l % size == 0){
						$(this).parent().find(".box_in").animate({ left:ll+"px"}, 500);
						$(this).parent().find(".btn_r").addClass("act");
						if(0 == ll){
							$(this).parent().find(".btn_l").removeClass("act");
						}
					}
				}

			} else if (direction == 'left'){//左へスワイプ 進む

				item_cnt = $(this).parent().find(".item").length;
				min_left = 0 - (item_cnt - 1) * size;
				l = parseInt($(this).parent().find(".box_in").css('left'), 10);
				ll = l-size;
				if(l > min_left){
					if(l % size == 0){
						$(this).parent().find(".box_in").animate({ left:ll+"px"}, 500);
						$(this).parent().find(".btn_l").addClass("act");
						if(min_left == ll){
							$(this).parent().find(".btn_r").removeClass("act");
						}
					}
				}


			}
		}

		//横方向の座標を取得
		function getPosition(event) {
			return event.originalEvent.touches[0].pageX;
		}

以下は実装に伴うスタイルですが、要件に応じて調整してください。

.base{
	width: 100%;
	margin:10px 0;
	height:140px;
	clear:both;
}
.box_out{
	float: left;
	width: 90%;
	height: 120px;
	overflow-x: hidden;
	background: #CCC;
	padding: 10px 0;
}
.box_in{
	width: 600px;
	position: relative;
	float: left;
}
.box_in .item{
	background: #EEF;
	width: 120px;
	height: 120px;
	margin: 0 10px 0 0;
	float: left;
	line-height:120px;
	font-size:20px;
	text-align:center;
}
.btn_l{
	float:left;
	background: #999;
	color: #FFF;
	height: 140px;
	line-height: 140px;
	cursor: pointer;
	width:5%;
	text-align: center;
}
.btn_r{
	float:left;
	background: #999;
	color: #FFF;
	height: 140px;
	line-height: 140px;
	cursor: pointer;
	width:5%;
	text-align: center;
}

.act{
	background: #99F;
}

最後に以下はHTMLのタグです。

複数同じ要素が設置されてもよいように、クラスのみで構成しました。

itemクラスは任意の個数の設置が可能です。

<div class="base">
	<div class="btn_l"><</div>
	<div class="box_out">
		<div class="box_in">
			<div class="item">aaa</div>
			<div class="item">bbb</div>
			<div class="item">ccc</div>
			<div class="item">ddd</div>
		</div>
	</div>
	<div class="btn_r act">></div>
</div>