How could I implement a Swipe for this slide library?

Question

I’m using this library / Plunker:

I would like to make the touch work with the effect:

touch-action: pan-x;

Like this example, if you enable the console, with active mobile version can see the ringtone working.

Em tried to do using javascript:

 $(document).on("touchstart",'.carousel-item', function(ts) {

               var start_client_x = ts.clientX + parseInt($(this).width());
                   current_client_x = ts.clientX+ parseInt($(this).width());


               if (ts.type == 'touchstart') {
                   var touch = ts.originalEvent.touches[0] || ts.originalEvent.changedTouches[0];
                   ts = touch;
                   //  start_page = ts.pageX;
                    start_client_x = ts.clientX+ parseInt($(this).width());
               }

               $(document).on("touchmove", '.carousel-item', function (e) {

                   if(e.type == 'touchmove') {
                       var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
                       e = touch;
                       //current_page = e.pageX;
                       current_client_x = e.clientX+ parseInt($(this).width());
                   }

                   console.log('start->'+start_client_x, 'end->'+current_client_x);
                   // var x_position = e.pageY;
                   //
                   if (start_client_x < current_client_x) {
                       $(this).parent().parent().parent().parent().find('.carousel-next .carousel-btn').trigger('click');
                   } else if (start_client_x > current_client_x) {
                       $(this).parent().parent().parent().parent().find('.carousel-prev .carousel-btn').trigger('click');
                   }

               });
           });

But it got a little strange the movement.

Answer 1

I managed to solve by doing so:

$scope.swipeGallery = function() {
    //PERMITE SWIPE (EVENTO TOUCH DE ARRASTAR) NO CARROSSEL

      $(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_page = e.pageX;
                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');
                    }
                }

            }

        });

    });
}