javascript - 如何使用hammer.js在手机和平​​板电脑中运行触摸滑动

Question

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

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>

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

Answer 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();
        }
    });
};