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

南国老符 南国老符 最后更新于:2019-07-25 浏览:2234

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



点赞 (0)

收藏 (0)
转载请务必注明: 来源:《建站管家》https://www.df81.com/news/14.html

本站部分信息来源网络,如有侵权,请联系QQ:1062129401删除。

上一篇: 分享6大产品定价策略

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

请先登录后,再发表评论 ~ ~
发表评论
发表帖子
广告位招租( ¥5 / 天 )
点击咨询
最新帖子

南国老符
2025-05-26 16:54
南国老符
2024-09-29 10:29
南国老符
2023-12-15 21:41
广告位招租( ¥5 / 天 )
点击咨询
最近评论

Y
yuanis90
回复:在后台->全局管理->网站设置->网站html代码,把你申请的分享代码贴到这里保存即可。以后发问题,请贴出具体版本号
南国老符
回复:发表帖子发不了  乱码
南国老符
回复:第一位参与的老总,是做洗衣店saas系统的,需要的请联系
9
9252
回复:新版已经修复了的,升级忘记覆盖了,你重新下载即可。
U
user1304
回复:PHP开启fileinfo扩展即可
U
user1379
回复:版本号多少?
购买VIP
购买授权
余额充值
发表帖子
客服微信