how to run touch swipe in mobile and tablet by using hammer.js

Question

I want to run touch swipe in mobile and tablet. I want when i swipe the carousel it should move with tab. I used below mentioned code and carousel touch swipe is working fine but tabs are not moving with carousel.

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>

When i click on left and right arrows the carousel moves with the tab and i want the same thing happen with touch swipe. Please let me know what should i add in my script to make it workable.

Answer 1

You can try this trick...

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