根据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'); //根据初始值和结束值的比较判断向前滑还是向后滑
          }
     })
})