Bootstrap 轮播图Carousel 实现左右滑动手势

前言

bootstrap的carousel轮播图只有两侧的边可以进行点击并进行上一页下一页,但是这个轮播图放在手机页面H5里就很需要手势左右滑动。我查了下网上都是引一些别的类库,并不是最好的方法。

代码

其实bootstrap有提供左右切换的方法,但是没有监听手势滑动的事件,我们只需要实现监听事件并进行处理就可以了。

三个事件

ontouchstart当按到屏幕时触发
ontouchmove当屏幕上的手指移动时触发
ontouchend当手指从屏幕上抬起时触发
<div class="carousel-inner" ontouchstart='getFlag()' ontouchmove='setFlag()' ontouchend='change()'>
</div>

在carousel-inner的div上加了这三个事件,接着,用两个变量来存滑动起点和滑动终点(因为为了实现左右滑动,所以只声明了接收水平轴位置的两个变量)

两个变量

    var flagX = 0;
    var flagXM = 0;

接着,就是三个方法:

三个方法

    function getFlag(){
        flagX = event.touches[0].pageX;
        flagXM = flagX;
    }

    function setFlag(){
        flagXM = event.touches[0].pageX;
    }

    function change(){
        var range = flagXM - flagX;
        //如果水平滑动距离小于30,就不切换
        if(Math.abs(range) < 30){
            return false;
        }     
        var direction = range < 0 ?'next':'prev';
        $("#carousel-example-generic").carousel(direction);
    }

 

 

 

 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值