首先引入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）導(dǎo)航 -->
</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