首页 > 其他 > 详细

bootstrap 轮播图不能手动滑动问题

时间:2021-07-01 14:47:37      阅读:31      评论:0      收藏:0      [点我收藏+]

1、在使用bootstrap中发现,轮播图不能用手指滑动,需要添加以下代码:

  //定义起始为止的和结束位置变量
    let start, end;
    function handleTouchEvent(event) {

        //代表用户手指有触摸的状态,离开的时候状态touches的长度为0
        if (event.touches.length == 1) {
            //获取当前位置(手指触摸的时候一直是触发的状态)
            let positionDom = event.touches[0].clientX;
            
            switch (event.type) {
                //手指放在一个DOM元素上
                case "touchstart":
                    console.log(positionDom);
                    start = positionDom;
                    break;

                //手指拖曳一个DOM元素
                case "touchmove":
                    console.log(positionDom);
                    end = positionDom;
                    break;

            }
        }else if(event.touches.length == 0){
            //手指从一个DOM元素上移开
            if(event.type == "touchend"){
                
                //代表用户向上滑动
                if(end > start){
                    //跳转到上一页
                    $("#carouselExampleCaptions").carousel(prev);
                }else if(end < start){
                    //跳转到下一页
                    $("#carouselExampleCaptions").carousel(next);
                }
            }
            
        }
    }

    document.getElementById("carouselExampleCaptions").addEventListener("touchstart", handleTouchEvent, false);
    document.getElementById("carouselExampleCaptions").addEventListener("touchend", handleTouchEvent, false);
    document.getElementById("carouselExampleCaptions").addEventListener("touchmove", handleTouchEvent, false);

 

bootstrap 轮播图不能手动滑动问题

原文:https://www.cnblogs.com/laid/p/14957924.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!