allow multi carousel in same page

Question

I have this code for slider. i need help to edit it to allow multiple sliders in same page.

i used ChatGPT to edit it and working.

but i get some problem with touch event.

I have this code for slider. i need help to edit it to allow multiple sliders in same page.

i used ChatGPT to edit it and working.

but i get some problem with touch event.

var all_divs = $('.px-carousel-container .px-carousel-item').length;

var i = 0,
    n = 0;
let scrollleft_before = 0;

let margin = 0;
if (is_rtl()) {
    margin = parseInt($('.px-carousel-item').css('margin-left'));
} else {
    margin = parseInt($('.px-carousel-item').css('margin-right'));
}
var position_items = [0];

function width_total() {
    var sumando_ancho = 0;
    for (var pi = 0; pi < all_divs; pi++) {
        if (pi + 1 == all_divs) {
            sumando_ancho += parseFloat($('.px-carousel-container .px-carousel-item')[pi].getBoundingClientRect().width.toFixed(2));
        } else {
            sumando_ancho += parseFloat($('.px-carousel-container .px-carousel-item')[pi].getBoundingClientRect().width.toFixed(2)) + margin;
        }
    }
    var carousel_wrapper_width = $('.px-carousel-wrapper').outerWidth();
    $('.px-carousel-container').css({
        'width': sumando_ancho + "px"
    });


    return sumando_ancho;
}
$('.px-carousel-container').css({
    'min-width': +$('.px-carousel-wrapper').outerWidth() + 'px'
});

function posiciones() {
    var position_items = [0];
    var sumando_posicion = 0;
    for (var pi = 0; pi < all_divs; pi++) {
        if (pi > 0) {
            if (is_rtl()) {
                sumando_posicion += parseFloat($('.px-carousel-container .px-carousel-item')[pi - 1].getBoundingClientRect().width.toFixed(2)) + margin;
            } else {
                sumando_posicion += parseFloat($('.px-carousel-container .px-carousel-item')[pi - 1].getBoundingClientRect().width.toFixed(2)) + margin;
            }
            position_items.push(sumando_posicion);
        }
    }
    return position_items;
}

function getTranslate3d(el) {
    var values = el.style.transform.split(/\w+\(|\);?/);
    if (!values[1] || !values[1].length) {
        return [];
    }
    return parseFloat(values[1].split(/px,\s?/g)[0]);
}


if ($('.px-carousel-container').length) {

    document.getElementsByClassName('px-carousel-container')[0].addEventListener("touchstart", startTouch, {
        passive: true
    });
    document.getElementsByClassName('px-carousel-container')[0].addEventListener("touchmove", moveTouch, {
        passive: true
    });

    var initialX = null;
    var initialY = null;

    var rev = -1;

    function startTouch(e) {
        initialX = e.touches[0].clientX;
        initialY = e.touches[0].clientY;
        blu_ = 0;
    };

    var iniciado = 0;
    var trnas = 0;
    var blu_ = 0;

    function moveTouch(e) {
        var sumando_ancho = width_total();
        blu_++;

        if (blu_ == 1) {
            iniciado = e.touches[0].pageX;
            trnas = getTranslate3d(document.getElementsByClassName('px-carousel-container')[0]);
        }
        var currentX = e.touches[0].clientX;
        var currentY = e.touches[0].clientY;

        var diffX = initialX - currentX;
        var diffY = initialY - currentY;

        var translate_new = diffX * rev + trnas;

        if (is_rtl()) {
            if (translate_new > 0 && translate_new < sumando_ancho - $('.px-carousel-wrapper').outerWidth()) {
                $('.px-carousel-container').css({
                    'transform': 'translate3d(' + translate_new + 'px, 0px, 0px)',
                    'transition': 'none'
                });
            }
        } else {
            if ((translate_new * rev) > 0 && (translate_new * rev) < (sumando_ancho - $('.px-carousel-wrapper').outerWidth())) {
                $('.px-carousel-container').css({
                    'transform': 'translate3d(' + translate_new + 'px, 0px, 0px)',
                    'transition': 'none'
                });
            }
        }
        e.preventDefault();
    };
}


$(document).on('click', '.px-carousel-nav .px-next', function() {
var sumando_ancho = width_total();
var widthToMove = 4 * $('.px-carousel-item').outerWidth(true);
var translate = getTranslate3d(document.getElementsByClassName('px-carousel-container')[0]);
var newTranslate = translate - widthToMove;
if (newTranslate <= -(sumando_ancho - $('.px-carousel-wrapper').outerWidth())) {
    newTranslate = -(sumando_ancho - $('.px-carousel-wrapper').outerWidth());
    $('.px-next').addClass('disabled');
} else {
    $('.px-next').removeClass('disabled');
    $('.px-prev').removeClass('disabled');
}
$('.px-carousel-container').css({
    'transform': 'translate3d(' + newTranslate + 'px, 0px, 0px)',
    'transition': 'all 0.25s ease 0s'
});
});

$(document).on('click', '.px-carousel-nav .px-prev', function() {
var widthToMove = 4 * $('.px-carousel-item').outerWidth(true);
var translate = getTranslate3d(document.getElementsByClassName('px-carousel-container')[0]);
var newTranslate = translate + widthToMove;
if (newTranslate > 0) {
    newTranslate = 0;
    $('.px-prev').addClass('disabled');
} else {
    $('.px-prev').removeClass('disabled');
    $('.px-next').removeClass('disabled');
}
$('.px-carousel-container').css({
    'transform': 'translate3d(' + newTranslate + 'px, 0px, 0px)',
    'transition': 'all 0.25s ease 0s'
});
});
function is_rtl() {
    if ($('html[dir=rtl]').length) {
        return true;
    }
}

function carousel_px(citem) {
    if (!$('.px-carousel').length) return false;

    let margin;
    if (is_rtl()) {
        margin = parseInt($('.px-carousel-item').css('margin-left'));
    } else {
        margin = parseInt($('.px-carousel-item').css('margin-right'));
    }


    let cd = (($('.px-carousel-wrapper').width()) / citem) - margin + (margin / citem);
    $('.home .px-carousel .px-carousel-item').width(cd.toFixed(2));
    

    let width_slide = $('.px-carousel-container');
    let scrollleft_slide = Math.round($('.px-carousel-container').scrollLeft());

    $('.px-carousel-container').scrollLeft(scrollleft_slide);
}
let detectViewPort = function() {
    width_total();
    let viewPortWidth = $(window).width();
    if (viewPortWidth <= 470) {
        carousel_px(3);
        } else if (viewPortWidth <= 540) {
        carousel_px(4);
        } else if (viewPortWidth <= 640) {
        carousel_px(4);
    } else if (viewPortWidth <= 740) {
        carousel_px(6);
        } else if (viewPortWidth <= 940) {
        carousel_px(8);
        
    } else {
        if( $(document).find('body').hasClass('sidg') ) {
            if( $(document).find('body').hasClass('full-width') ) {
                carousel_px(3);
            } else {
                carousel_px(2);
            }
        }
        else {
            if( $(document).find('body').hasClass('full-width') && viewPortWidth >= 1100 ) {
                carousel_px(7);
            } else {
                carousel_px(10);
            }
        }
    }

};
detectViewPort();
$(window).resize(function() {
    detectViewPort();
});