根据bootstrap框架实现移动端触摸滑动的方法

有一个移动端的项目要求用jquery+bootstrap,其中有一个轮播图,需求是要求可以手触滑动,但是bootstrap中没有写手触滑动的方法,自己琢磨着写了出来,供大家参考。

$(function () {
  let $carousels = $(\'#carouselExampleSlidesOnly\');
  let start,   // 初始值
       end;    // 结束值
  $carousels.on(\'touchstart\', function (e) {
        start = e.originalEvent.touches[0].clientX;// 触摸开始时记录一下手指所在的坐标x
   });
   $carousels.on(\'touchmove\', function (e) {
         end = e.originalEvent.touches[0].clientX;// 离开屏幕一瞬间的坐标x
    });
    $carousels.on(\'touchend\', function (e) {
         let distance = Math.abs(start - end); // 获取差值
         if (distance > 30) {    //当差值大于30说明有方向的变化
             $(this).carousel(start > end ? \'next\' : \'prev\'); //根据初始值和结束值的比较判断向前滑还是向后滑
          }
     })
})