@Leadmagneet

Как сделать swipe блоков jquery?

Есть блок с горизотальной прокруткой
<div class="block_content" id="touch">
	
		<div class="item_content" id="orders_content">
			<h3>1 orders_content</h3>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>

		<div class="item_content" id="content">
			<h3>2 content</h3>
			<ul>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>8</li>
				<li>8</li>
				<li>8</li>
			</ul>
		</div>

		<div class="item_content" id="contacts_content">
			<h3>3 contacts_content</h3>
			<ul>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
			</ul>
		</div>

		<div class="item_content" id="stats_content">
			<h3>4 stats_content</h3>
			<ul>
				<li>13</li>
				<li>14</li>
				<li>15</li>
				<li>16</li>
				<li>16</li>
				<li>16</li>
			</ul>
		</div>
	</div>


.block_content{
	display: block;
	width: 100vw;
	overflow-y: auto;
	white-space: nowrap;
}

.item_content{
	width: 100vw;
	display: inline-block;
	vertical-align: top;
	min-height: 100vh;
	padding: 10px;
	border-left: 1px solid #000;
}


То есть в блоке block_content, есть несколько item_content, которых и нужно прокручивать по горизонтали к нужному.

var el = document.getElementById("touch");
	el.addEventListener("touchend", handleEnd, false);

	var el2 = document.getElementById("touch");
	el2.addEventListener("touchmove", touchmove, false);

	function touchmove(evt) {
		scroll_point=$(".block_content").scrollLeft();
	}
	function handleEnd(evt) {
		?
	}


Как определить на сколько сдвигать по горизонтали к тому или иному item_content?
  • Вопрос задан
  • 317 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
25 нояб. 2024, в 18:39
30000 руб./за проект
25 нояб. 2024, в 18:33
10000 руб./за проект
25 нояб. 2024, в 18:28
30000 руб./за проект