让Bootstrap的Carousel在移动端支持滑动切换
2017-05-27 本文已影响0人
守心向暖
(网络转载)移动端使用Bootstrap的轮播Carousel插件支持滑动切换,添加以下代码:
<script type="text/javascript">
var isTouch=('ontouchstart' in window);
if(isTouch){
$(".carousel").on('touchstart', function(e){
var that=$(this);
var touch = e.originalEvent.changedTouches[0];
var startX = touch.pageX;
var startY = touch.pageY;
$(document).on('touchmove',function(e){
touch = e.originalEvent.touches[0] ||e.originalEvent.changedTouches[0];
var endX=touch.pageX - startX;
var endY=touch.pageY - startY;
if(Math.abs(endY)<Math.abs(endX)){
if(endX > 10){
$(this).off('touchmove');
that.carousel('prev');
}else if (endX < -10){
$(this).off('touchmove');
that.carousel('next');
}
return false;
}
});
});
$(document).on('touchend',function(){
$(this).off('touchmove');
});
}
</script>
需要注意:将以上代码与其他插件代码一起打包时,可能会造成该代码失效,可以指定打包顺序或将该代码单独提出来。