<转载>bootstrap轮播图手机端左右滑动事件

转载地址：http://blog.csdn.net/wmwyyx/article/details/46608893#

用bootstrap做出的项目轮播图在手机端不能滑动，为此找了好多插件、框架。但是都不能和bootstrap良好的结合。

功夫不负有心人，经过一番查找终于在github找到了一段js：toucher.js，原文链接：https://github.com/bh-lay/toucher

第一.在head中加载toucher.js

<script type="text/JavaScript"src="__PUBLIC__/home/js/toucher.js"></script>

第二.在轮播图页面实现触屏事件。

轮播图代码：

<div id="carousel-example-generic" class="carousel slide both" data-ride="carousel">  
  <!-- Indicators -->  
            <ol class="carousel-indicators">  
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>  
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>  
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>  
            </ol>  
  
  <!-- Wrapper for slides -->  
            <div class="carousel-inner" role="listbox">  
                <div class="item active">  
                    <img src="__PUBLIC__/home/img/banner_01.jpg" alt="...">  
                    <div class="carousel-caption">  
                    ...  
                    </div>  
                </div>  
                <div class="item">  
                    <img src="__PUBLIC__/home/img/banner_02.jpg" alt="...">  
                        <div class="carousel-caption">  
                        ...  
                        </div>  
                </div>  
                <div class="item">  
                    <img src="__PUBLIC__/home/img/banner_03.jpg" alt="...">  
                    <div class="carousel-caption">  
                    ...  
                    </div>  
                </div>      
            </div>  
            <!-- Controls -->  
            <a id="carleft" class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">  
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>  
                <span class="sr-only">Previous</span>  
            </a>  
            <a id="carright" class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">  
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>  
                <span class="sr-only">Next</span>  
            </a>  
        </div>  
</div>

 

使用js代码：

<script>  
var myTouch = util.toucher(document.getElementById('carousel-example-generic'));  
  
myTouch.on('swipeLeft',function(e){  
    $('#carright').click();  
}).on('swipeRight',function(e){  
    $('#carleft').click();  
});  
  
</script>