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

川长思鸟来 2022-04-18 00:16 1091阅读 0赞

## 前言 ##

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

## 代码 ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hjeTExOTMwNjg2Mzk_size_16_color_FFFFFF_t_70][]

### 三个事件 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>ontouchstart</td> 
   <td>当按到屏幕时触发</td> 
  </tr> 
  <tr> 
   <td>ontouchmove</td> 
   <td>当屏幕上的手指移动时触发</td> 
  </tr> 
  <tr> 
   <td>ontouchend</td> 
   <td>当手指从屏幕上抬起时触发</td> 
  </tr> 
 </tbody> 
</table>

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

### 两个变量 ###

var flagX = 0;
        var flagXM = 0;

接着，就是三个方法：

### 三个方法 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hjeTExOTMwNjg2Mzk_size_16_color_FFFFFF_t_70]: /images/20220418/8a50601dee2d420395914be887b448f6.png