图片轮播使用bootstrap加上手势触摸轮播

1.引用bootstrap的js方法，但是只能实现定时图片轮播

<div id="Mycarousel" class="carousel slide col-md-12" data-ride="carousel" data-interval="4000" >

            <!-- 底部的指示小圆点-->

            <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>

            <!-- 图片容器-->

            <div class="carousel-inner">

                <div class="item active ">

                    <img src="img/banner.png" width="100%" />

                </div>

                <div class="item">

                    <img src="img/banner.png" width="100%"/>

                </div>

                <div class="item ">

                    <img src="img/banner.png" width="100%"/>

                </div>

            </div>

           

        </div>

2.添加手势触摸轮播，引用hammer.js

<script src="js/hammer.min.js"></script>

3.添加js代码在script中

$(function(){
var myElement=document.getElementById('Mycarousel');
var hm=new Hammer(myElement);
hm.on("swipeleft",function(){
$('#Mycarousel').carousel('next');
})
hm.on("swiperight",function(){
$('#Mycarousel').carousel('prev');
})

});