触屏滑动

1.手机端
鼠标拖动滑行——触屏滑动
效果：可以拖动，点中的选项居中显示

		<div  id="courNav" class="tui-type-swip swiper-container">
			<ul class="tui-course-tab swiper-wrapper">
				<li class="on swiper-slide">雅思托福封闭培训</li>
				<li class="swiper-slide">雅思秋季课程</li>
				<li class="swiper-slide">雅思托福封闭培训</li>
				<li class="swiper-slide">雅思秋季课程</li>
				
			</ul>
		</div>
		<script src="js/jquery-1.11.3.js"></script>
		<script src="js/swiper.min.js"></script>
		<script>
			//课程导航
			var mySwiper = new Swiper('#courNav', {
			    freeMode: true,
			    freeModeMomentumRatio: 0.5,
			    slidesPerView: 'auto',
			
			});
			
			swiperWidth = mySwiper.container[0].clientWidth;
			maxTranslate = mySwiper.maxTranslate();
			maxWidth = -maxTranslate + swiperWidth / 2;
			$(".swiper-container").on('touchstart', function (e) {
			    e.preventDefault();
			});
			//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
			mySwiper.on('tap', function (swiper, e) {
			    //	e.preventDefault()
			    slide = swiper.slides[swiper.clickedIndex];
			    slideLeft = slide.offsetLeft;
			    slideWidth = slide.clientWidth;
			    slideCenter = slideLeft + slideWidth / 2;
			    // 被点击slide的中心点
			    mySwiper.setWrapperTransition(300);
			
			    if (slideCenter < swiperWidth / 2) {
			
			        mySwiper.setWrapperTranslate(0);
			
			    } else if (slideCenter > maxWidth) {
			
			        mySwiper.setWrapperTranslate(maxTranslate);
			
			    } else {
			
			        nowTlanslate = slideCenter - swiperWidth / 2;
			
			        mySwiper.setWrapperTranslate(-nowTlanslate);
			
			    }
			    $("#courNav  .on").removeClass('on');
			    $("#courNav .swiper-slide").eq(swiper.clickedIndex).addClass('on');
				
				
			});
		</script>

煮：不能使用最新版的css和js