How to implement a Swipe event for this carousel?

Question

I’m using that lib: angular-ui-Carousel

This plugin has a compiled template, so it does not allow you to use ng-if in the scope, use only ng-show / ng-Hide. It keeps as a rule the key "item" to pick an ng-repeat item within the scope of the carousel, if you need to call some method internally, it should be in the collection, example:

app.controller("ctrl", [
    "$scope",function($scope) {

    'use strict';
    $scope.recentes = [
    {id:1, imagem:"/path/img2.jpg", 
    is_content_hide:false,
    num_slide: 0,
    displayItem: function(){
        console.log(this);
    }},
    {id:2, imagem:"/path/img2.jpg", 
     is_content_hide:false,
     num_slide:1, 
    displayItem: function(){
        console.log(this);
    }}
    ];   
}]);

What I was able to do was just activate next / Prev by dragging, but it’s not a Swipe event, as it could improve this?

$scope.navigationGallery = function() {

    $(function() {

        var start_client_x = null, start_client_y = null;
        var current_client_x = null, current_client_y = null;

        $(document).on("touchstart touchend", '.track-wrapper', function(e) {

            var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

            if (e.type == 'touchstart') {
                //has_permission_swipe = false;
                start_client_x = null;
                start_client_y = null;
                    start_client_x = parseInt(touch.clientX);
                start_client_y = parseInt(touch.clientY);

            }

            if (e.type == 'touchend') {  
                e.stopImmediatePropagation();
                current_client_x = parseInt(touch.clientX);
                current_client_y = parseInt(touch.clientY);

                if (!start_client_x) {
                    return;
                }

                var xDiff = parseInt(parseInt(start_client_x) - parseInt(current_client_x));
                var yDiff = parseInt(parseInt(start_client_y) - parseInt(current_client_y));
            
                if (Math.abs(xDiff) < Math.abs(yDiff) || Math.abs(xDiff) < 10) {
                    return;
                }

                var meia_tela = parseInt(window.innerWidth / 2);

                if (start_client_x!= null) {
                    
                    start_client_x = null;
                    start_client_y = null;
                    current_client_x = null; 
                    current_client_y = null;

                    if (xDiff < 0 || (meia_tela < parseInt(current_client_x) && xDiff < meia_tela)) {
                        /* left swipe */
                        var btn = $(this).parent().parent().find('.carousel-prev .carousel-btn');
                            btn.trigger('click');
                    } else {
                    /* right swipe */
                            var btn = $(this).parent().parent().find('.carousel-next .carousel-btn');
                        btn.trigger('click');
                    }
                }
            }
               
            
        });

    });
}
$scope.navigationGallery();

HTML of the carousel:

<div id="c_recentes" data-ui-type="recentes" class="box-slides-recentes" ng-if="recentes.length > 0" >
    <div ng-class="{'opacity-loading':!show_slide.recentes}">
        <ui-carousel 
        on-after-change="singleAfter(currentSlide, 'recentes')"
        on-before-change="singleBefore(currentSlide, 'recentes')"
        slides="recentes"
        slides-to-show="show_recentes_slides"
        slides-to-scroll="scroll_recentes_slides || 1"
        autoplay="false"
        autoplay-speed="2000"
        initial-slide="slide_start.recentes"
        infinite="false"
        arrows="nextActive('recentes')"
        dots="false">
        <carousel-item>
            <div class="action" ng-class="{'hide-content':(item.is_content_hide)}">
                <div class="slide-item">
                    <div ng-show="item.id > 0" class="slide-container">
                        <a href="javascript:void(0)" id="slide_re_{{($index - item.num_slide) + 1}}" ng-click="item.displayItem();">
                        <div class="container-info">
                            <figure class="tint">
                                <img  id="img_recentes_{{item.id}}" ng-src="{{item.imagem}}" class="img-scroll">
                            </figure>
                        </div>
                        </a>
                    </div>
                </div>
            </div>
        </carousel-item>
        <carousel-prev>
                <div data-ui-button="recentes" class="nav-recentes left">
                        <div class="nav-align">
                            <button class="prev_recentes carousel-prev carousel-btn">
                                <span class="combo icon-caret-left" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>               
            </carousel-prev>
            <carousel-next>
                <div data-ui-button="recentes" class="nav-recentes right">
                    <div class="nav-align">
                        <button class="next_recentes carousel-next carousel-btn">
                            <span class="combo icon-caret-right" aria-hidden="true"></span>
                        </button>
                    </div>
                </div>
            </carousel-next>
        </ui-carousel>
</div>