Bootstrap设置手指滑动切换下一张

设置全屏轮播，并且手指滑动切换下一张。

<!--引导页-->
	<div id="myCarousel" class="carousel slide">
	   <!-- 轮播（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>
	      <li data-target="#myCarousel" data-slide-to="3"></li>
	      <li data-target="#myCarousel" data-slide-to="4"></li>
	   </ol>   
	   <!-- 轮播（Carousel）项目 -->
	   <div class="carousel-inner">
	      <div class="item active">
	         <div style="width: 100vw;height: 100vh;background: red;"></div>
	      </div>
	      <div class="item">
	         <div style="width: 100vw;height: 100vh;background: green;"></div>
	      </div>
	      <div class="item">
	         <div style="width: 100vw;height: 100vh;background: blue;"></div>
	      </div>
	      <div class="item">
	         <div style="width: 100vw;height: 100vh;background: orange;"></div>
	      </div>
	      <div class="item">
	         <div style="width: 100vw;height: 100vh;background: pink;display: flex;align-items: center;justify-content: center;">
	         </div>
	      </div>
	   </div>
	   <!-- 轮播（Carousel）导航 -->
	   <!--<a class="carousel-control left" href="#myCarousel" 
	      data-slide="prev">&lsaquo;</a>
	   <a class="carousel-control right" href="#myCarousel" 
	      data-slide="next">&rsaquo;</a>-->
	</div> 
	<script type="text/javascript">
		$('.carousel').carousel({
			interval:4000
		});
		//手指滑动切换下一张
		$carousels = $("#myCarousel");//effect是轮播图id
		var startX,endX;
		// 在滑动的一定范围内，才切换图片
		var offset = 50;
		// 注册滑动事件
		$carousels.on('touchstart',function (e) {
		    // 手指触摸开始时记录一下手指所在的坐标x
		    startX = e.originalEvent.touches[0].clientX;
		});
		$carousels.on('touchmove',function (e) {
		    // 目的是：记录手指离开屏幕一瞬间的位置 ，用move事件重复赋值
		    endX = e.originalEvent.touches[0].clientX;
		});
		$carousels.on('touchend',function (e) {
		    //console.log(endX);
		    //结束触摸一瞬间记录手指最后所在坐标x的位置 endX
		    //比较endX与startX的大小，并获取每次运动的距离，当距离大于一定值时认为是有方向的变化
		    var distance = Math.abs(startX - endX);
		    if (distance > offset){
		        //说明有方向的变化
		        //根据获得的方向 判断是上一张还是下一张出现
		        $(this).carousel(startX >endX ? 'next':'prev');
		    }
		})
	</script>