bookstrap輪播移動端手指滑動

轉載地址:http://blog.csdn.net/wmwyyx/article/details/46608893#


用bootstrap做出的項目輪播圖在手機端不能滑動,爲此找了好多插件、框架。但是都不能和bootstrap良好的結合。

功夫不負有心人,經過一番查找終於在github找到了一段js:toucher.js,下載地址:http://download.csdn.net/download/wmwyyx/8832021


第一步--在head中加載toucher.js

<script type="text/JavaScript"src="__PUBLIC__/home/js/toucher.js"></script>


第二步--在輪播圖頁面實現觸屏事件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- bookstrap導入三個 -->
		<link rel="stylesheet" href="bootstrap3.3.7/css/bootstrap.min.css">
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="bootstrap3.3.7/js/bootstrap.min.js"></script>
		<script src="js/toucher.js"></script>
	</head>

	<body>
		<div id="carousel-example-generic" class="carousel slide both" data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<img src="image/1.jpg" alt="...">
					<div class="carousel-caption">
						...
					</div>
				</div>
				<div class="item">
					<img src="image/2.jpg" alt="...">
					<div class="carousel-caption">
						...
					</div>
				</div>
				<div class="item">
					<img src="image/3.jpg" alt="...">
					<div class="carousel-caption">
						...
					</div>
				</div>
			</div>
			<!-- Controls -->
			<a id="carleft" class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a id="carright" class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		</div>
	</body>
	<script>
		var myTouch = util.toucher(document.getElementById('carousel-example-generic'));

		myTouch.on('swipeLeft', function(e) {
			$('#carright').click();
		}).on('swipeRight', function(e) {
			$('#carleft').click();
		});
	</script>

</html>


JS是手指滑動時間,需要注意的地方是獲取的是3個地方的id改成你自己的,請注意!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章