党娟博客

Bootstrap轮播幻灯片广告,Carousel控件增加手势触控功能hammer.js

公司企业网站选用Bootstrap框架开发响应式页面,因其中需要实现轮播效果Bootstrap原生的 Bootstrap 的 carousel.js 插件并没有支持手势。 为了支持触控手势操作,选用hammer.js

1. Bootstrap Carousel轮播控件html代码

<div class="content-area">
    <div id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <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>
    
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placekitten.com/960/600">
            </div>
            <div class="item">
                <img src="http://placebear.com/960/600">
            </div>
            <div class="item">
                <img src="http://lorempixel.com/960/600">
            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>
</div>

 

2. hammer.js代码,注意id匹配

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://lazcreative.com/bs3/js/hammer.min.js"></script>
<script type="text/javascript" src="http://lazcreative.com/bs3/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {  
    $('#myCarousel').hammer().on('swipeleft', function(){
        $('#myCarousel').carousel('next'); 
    })
    $('#myCarousel').hammer().on('swiperight', function(){
        $('#myCarousel').carousel('prev'); 
    })
});  
</script>

 附件下载:boot.zip

 

原文地址:http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/


发表我的评论

Hi,您需要填写昵称和邮箱!

  • 必填项