在下面2个javascript之后:
<script type="text/javascript" src="owl.carousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="carousel.js"></script>
加上如下代码,可以解决carousel幻灯片手机触摸滑动bootstrap4问题
<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>上一篇: 分享6大产品定价策略
下一篇: 西部数码域名查询API接口代码