carousel幻灯片手机触摸滑动js代码bootstrap4

日期:2019-07-25 分类:知识技术 浏览:330 来源:建站管家


在下面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>


上一篇:《建站管家》二次开发文档

下一篇:西部数码域名查询API接口代码

发表评论
您需要登录后才可以评论 登 录 | 注 册
评论 (0)