如何使用hammer.js在手机和平板电脑上运行触摸滑动答案

【问题标题】：how to run touch swipe in mobile and tablet by using hammer.js如何使用hammer.js在手机和平板电脑上运行触摸滑动
【发布时间】：2014-08-08 12:46:54
【问题描述】：

我想在手机和平板电脑上运行触摸滑动。我希望当我滑动轮播时，它应该随标签一起移动。我使用了下面提到的代码，轮播触摸滑动工作正常，但选项卡没有随着轮播移动。

window.onload = function(){
       $.getScript("http://lazcreative.com/bs3/js/hammer.min.js", function () {   

   $(function() {
    function hammerOnOff() {
        $('.carousel-inner').off('swipeleft').off('swiperight');
        $('.carousel-inner').hammer().on('swipeleft', function() {
            $(this).parent().carousel('next'); 
            //alert('Left');
        });
        $('.carousel-inner').hammer().on('swiperight', function() {
            $(this).parent().carousel('prev'); 
            //alert('Right');
        });
    }
    hammerOnOff();
    var timer;
    $(window).scroll(function(e) {
        clearTimeout(timer);
        timer = setTimeout(checkStop, 150);
    });

    function checkStop() {
        hammerOnOff();
    }
});

   });
 }

HTML：

<div class="carousel slide propImageSlider propTechInfo" id="product-portfolio-carousal">
        <div class="row-fluid propSliderTab">
            <div class="fullContContainer relativePostion">
                <ol class="carousel-indicators">
                    <li class="" data-slide-to="0" data-target="#product-portfolio-carousal">
                        <span>First Tab</span>
                    </li>
                    <li data-slide-to="1" data-target="#product-portfolio-carousal" class="active"><span>Second Tab</span></li>
                    <li data-slide-to="2" data-target="#product-portfolio-carousal" class=""><span>Third Tab</span></li>
                </ol>
            </div>
        </div>
        <!-- Carousel items -->
        <div class="fullContContainer relativePostion">
            <div class="carousel-inner">
                <div class="item">
                    First Carousel


                </div>
                <div class="item active">
                    Second Carousel
                </div>
                <div class="item">
                    Third carousel
                </div>
            </div>
            <!-- Carousel nav -->        
            <a ng-click="pp_prevslide()" class="carousel-control left"><i class="pt pt-icon-angle-left"></i></a>
            <a ng-click="pp_nextslide()" class="carousel-control right"><i class="pt pt-icon-angle-right"></i></a>
        </div>

    </div>

当我点击左右箭头时，轮播会随着标签移动，我希望触摸滑动也会发生同样的事情。请让我知道我应该在脚本中添加什么以使其可行。

【问题讨论】：

有人能帮忙吗...我不擅长 js，已经花太多时间在上面了。

标签： javascript jquery html twitter-bootstrap hammer.js

【解决方案1】：

你可以试试这个技巧……

window.onload = function () {
    $.getScript("http://lazcreative.com/bs3/js/hammer.min.js", function () {
        function hammerOnOff() {
            $('.carousel').off('swipeleft').off('swiperight');
            $('.carousel').hammer().on('swipeleft', function () {
                $('.carousel-control.right', this).click();
            });
            $('.carousel').hammer().on('swiperight', function () {
                $('.carousel-control.left', this).click();
            });
        }
        hammerOnOff();
        var timer;
        $(window).scroll(function (e) {
            clearTimeout(timer);
            timer = setTimeout(checkStop, 150);
        });
        function checkStop() {
            hammerOnOff();
        }
    });
};

【讨论】：