Question

Bootstrap如何实现触屏左右滑动轮播？

您好，之前看到你在网上回到了一个bootstrap轮播的问题，您回答的那个是不考虑手指滑动，代码能正常运行，我想问一下，如果加上手指滑动效果，这个代码应该怎么写呢？

Answer 1

我自己写的BS轮播加手势滑动，引入了一个插件，直接看代码吧：

//引入插件
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jgestures.min.js"></script>

JS代码：

<script>
$(document).ready(function(){
	//手势右滑 回到上一个画面
	$('#myCarousel').bind('swiperight swiperightup swiperightdown',function(){
    	$("#myCarousel").carousel('prev');
    })
	//手势左滑 进入下一个画面
	$('#myCarousel').bind('swipeleft swipeleftup swipeleftdown',function(){
		$("#myCarousel").carousel('next');
    })
})
</script>

HTML代码：

<div id="myCarousel" class="carousel slide pad_010 b_k" data-ride="carousel">
   			<!-- 轮播（Carousel）指标 -->
   			<ol class="carousel-indicators">
      			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      			<li data-target="#myCarousel" data-slide-to="1"></li>
      			<li data-target="#myCarousel" data-slide-to="2"></li>
   			</ol>   
   			<!-- 轮播（Carousel）项目 -->
   			<div class="carousel-inner bor_btm">
      			<div class="item active">
         			<div class="row marg_0 pad_t_10">
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/yule.png" width="70%">
							<p class="nav_tag_t">娱乐</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/huodong.png" width="70%">
							<p class="nav_tag_t">活动</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/tuangou.png" width="70%">
							<p class="nav_tag_t">团购</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/huiyuanka.png" width="70%">
							<p class="nav_tag_t">会员卡</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/meishi.png" width="70%">
							<p class="nav_tag_t">美食</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/dianying.png" width="70%">
							<p class="nav_tag_t">电影</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/jiudian.png" width="70%">
							<p class="nav_tag_t">酒店</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/waimai.png" width="70%">
							<p class="nav_tag_t">外卖</p>
						</div>
					</div>
      			</div>
      			<div class="item">
         			<div class="row marg_0 pad_t_10">
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/qinzi.png" width="70%">
							<p class="nav_tag_t">亲子</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/zuliao.png" width="70%">
							<p class="nav_tag_t">足疗按摩</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/jingdian.png" width="70%">
							<p class="nav_tag_t">景点</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/daojia.png" width="70%">
							<p class="nav_tag_t">到家</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/yundong.png" width="70%">
							<p class="nav_tag_t">运动健身</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/gouwu.png" width="70%">
							<p class="nav_tag_t">购物</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/KTV.png" width="70%">
							<p class="nav_tag_t">KTV</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/jiehun.png" width="70%">
							<p class="nav_tag_t">结婚</p>
						</div>
					</div>
      			</div>
      			<div class="item">
      				<div class="row marg_0 pad_t_10">
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/chongwu.png" width="70%">
							<p class="nav_tag_t">宠物</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/aiche.png" width="70%">
							<p class="nav_tag_t">爱车</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/youhui_002.png" width="70%">
							<p class="nav_tag_t">优惠</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/yanchu.png" width="70%">
							<p class="nav_tag_t">演出</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/kafei.png" width="70%">
							<p class="nav_tag_t">咖啡厅</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/jiaoyu.png" width="70%">
							<p class="nav_tag_t">教育培训</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/jiazhuang.png" width="70%">
							<p class="nav_tag_t">家装</p>
						</div>
						<div class="col-xs-3 nav_tag_ico">
							<img src="images/qita.png" width="70%">
							<p class="nav_tag_t">全部分类</p>
						</div>
					</div>
      			</div>
   			</div>
		</div>

CSS代码就自己写吧，相信难不倒你