bookstrap轮播移动端手指滑动

最新推荐文章于 2022-10-16 18:13:30 发布

盖被子的冰块

最新推荐文章于 2022-10-16 18:13:30 发布

阅读量531

点赞数 2

分类专栏：前端开发

前端开发专栏收录该内容

6 篇文章 3 订阅

订阅专栏

转载地址：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改成你自己的，请注意！

盖被子的冰块

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bookstrap轮播移动端手指滑动

转载地址：http://blog.csdn.net/wmwyyx/article/details/46608893#用bootstrap做出的项目轮播图在手机端不能滑动，为此找了好多插件、框架。但是都不能和bootstrap良好的结合。功夫不负有心人，经过一番查找终于在github找到了一段js：toucher.js，下载地址：http://download.csdn.net/download/w...
复制链接

扫一扫

专栏目录