首先引入css,js文件

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

轮播代码

<div id="myCarousel" class="carousel slide col-md-4 col-sm-12">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="img/1.jpg" alt="First slide">
            <h3>123456789</h3>
        </div>
        <div class="item">
            <img src="img/2.jpg" alt="Second slide">
            <h3>987654321</h3>
        </div>
        <div class="item">
            <img src="img/3.jpg" alt="Third slide">
            <h3>123456789</h3>
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
</div>

改造为移动端手势滑动

<script type="text/javascript">
    var carousels = $(".carousel");  //获取所有的轮播图
    var startX,endX,finalMove;
    var diviation = 60;  //让手指滑动一定距离轮播图才工作
    carousels.on("touchstart",function(event) {
       // console.log(event.originalEvent.touches[0].pageX);
        startX = event.originalEvent.touches[0].pageX;//获取手指接触屏幕时的位置
    });
    carousels.on("touchmove",function(event) {
       // console.log(event.originalEvent.touches[0].pageX);
        endX = event.originalEvent.touches[0].pageX;//手指滑动时该值一直刷新，当手指离开时保留最后一次手指的位置
    })
    carousels.on("touchend",function(event) {
        //console.log(event.originalEvent.touches[0].pageX);
        finalMove = Math.abs(startX - endX) - diviation;
        if(finalMove > 0 && (startX - endX) > 0) {//如果手指滑动方向向左，轮播图向右播放一张图片
            $(this).carousel('next');
        }
        else if (finalMove > 0 && (startX - endX) < 0) {
            $(this).carousel('prev');
        }
    })
</script>

最终效果：

TIM图片20181020185120.png