bootstrap轮播图实现移动端滑动手势切图

bootstrap轮播图实现移动端滑动手势切图

最近使用bootstrap做响应式开发的时候，发现一只主打移动设备优先的bootstrap竟然轮播图没有支持移动端滑动手势，很是苦恼！！！！

网上取经得来经验，很不错的办法，记录一下，以备日后之需。

一个比较简单的方法是增加一个滑动手势js插件：hammer.js，网上有很多cdn调用地址，像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js，我们在head中加载一下然后再通过javascript把swipe功能调用出来就可以了。下面是幻灯片的原始html代码

<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
        <ol class="carousel-indicators">
          <li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
          <li data-slide-to="1" data-target="#carousel-example-generic" class="active"></li>
          <li data-slide-to="2" data-target="#carousel-example-generic" class=""></li>
        </ol>
        <div role