Vue+Bootstrap设置轮播触摸滑动

使用bootstrap的轮播

我最近写vue项目用到了bootstrap框架,其中轮播图我用的是bootstrap自带的轮播。但是变成手机端时，触摸无法滑动轮播图片，所以我在网上找了其他人的博客来解决这个问题，我的代码就是结合他们的博客写的，他们博客地址在下面：

移动端touch事件—利用bootstrap实现轮播图手指左右滑动事件
Vue 获取鼠标位置坐标

为了记录知识点而写的博客笔记：） （代码是借鉴上面两位的博客写的，不是原创不是原创）

轮播代码（不能触摸滑动）

<div class="banner   col-sm-12 col-md-12 col-lg-12">
          <div id="carouselExampleIndicators" class=" carousel slide " data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to=<