JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal-images-main">
                                                        <div id="modal-images-main-inner-container" class="modal-images-main-inner modal-images-main-effect" style="height: 440px; touch-action: pan-y;">
                                                            <div style="left: 0px; transform: translateX(0%);" id="modal-main-carousel" class="modal-images-main-carousel">
                                                                <div style="position: absolute; left: 0%;" data-index="0" class="modal-show-image">
                                                                    <div style="position: relative;">
                                                                        <div class="modal-main-image-wrapper">
                                                                            <img class="modal-main-image-wrap" data-sizes="auto" src="https://www.w3schools.com/howto/img_lights.jpg" style="pointer-events: none;">
                                                                        </div> 
                                                                    </div>
                                                                </div>
                                                                <div style="position: absolute; left: 100%;" data-index="1" class="modal-show-image">
                                                                    <div style="position: relative;">
                                                                        <div class="modal-main-image-wrapper">
                                                                            <img class="modal-main-image-wrap" data-sizes="auto" src="https://www.w3schools.com/html/pic_trulli.jpg" style="pointer-events: none;">
                                                                        </div> 
                                                                    </div>
                                                             ...

CSS

.modal-images-main {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.modal-images-main-inner {
    position: relative;
    overflow: hidden;
}
.modal-images-main-effect {
    
    
    border-radius: 24px;
}

.modal-show-image {
    width: 100%;
    overflow: hidden;
    position: absolute;
}

.modal-main-image-wrap {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

.modal-main-image-wrapper {
    height: 0; 
    padding-bottom: 100.0%; 
    overflow: hidden; 
    background: #f1f1f1;
}

.modal-no-transition {
    transition: none !important;
}

.modal-images-main-carousel {
  width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 400ms ease-out 0s;
}

JavaScript

const modal_images_main_inner = document.querySelector('.modal-images-main-inner');
    const modal_main_image_wrapper = document.querySelector('.modal-main-image-wrapper');
    const modal_main_carousel = document.getElementById('modal-main-carousel');
    
    const modal_slide_images = document.querySelectorAll('.modal-show-image');
    //const verttest = document.getElementById('verttest');

    const modalconfig = {
        modalindividualItem: '.modal-show-image', // class of individual item
        modalcarouselWidth: modal_images_main_inner.offsetWidth, // in px
        modalcarouselId: '#modal-images-main-inner-container',  // carousel selector
        modalcarouselHolderId: '#modal-main-carousel', // carousel should be <div id="carouselId"><div id="carouselHolderId">{items}</div></div>  
    }

    

    let modal_mousedown = false;
    let modal_movement = false;
    let modal_initialPosition = 0;
    let modal_selectedItem;
    let modal_currentDelta = 0;

    let modalupchange;
    let elementIndex;
    let modalupDelta;

    document.querySelectorAll(modalconfig.modalcarouselId).forEach(function(item) {
        item.addEventListener('pointerdown', function(e) {
            const modal_images_parent = e.target.closest('.modal-main-image-wrapper').parentElement;
            const imagesIndex = modal_images_parent.parentElement.dataset.index;
            elementIndex = imagesIndex;
            modal_mousedown = true;
            modal_selectedItem = item;
            modal_initialPosition = e.pageX;
            modal_currentDelta = parseFloat(item.querySelector(modalconfig.modalcarouselHolderId).style.transform.split('translateX(')[1]) || 0;
            
            modalupDelta = modal_currentDelta;
        });     
    });

    const modalscrollCarousel = function(change, currentDelta, selectedItem) {
   
        let newDelta = currentDelta + change;
        const diff = newDelta - (currentDelta);
        const diffpercent = (diff /...