Javascript Slide Left or Right to Seek

<!DOCTYPE html>
<html>

<body>
    <h2>JavaScript Image Swipe (left, right) using touch</h2>
    <div id="app" class="swipe-area">
        <img id="image" src="" alt="Swipe left or right">
        <div class="bottom-btns">
            <button id="prevButton">Previous</button>
            <button id="nextButton">Next</button>
        </div>
        <p id="imageCount">1/3</p>
    </div>

const imageElement = document.getElementById('image');
            const prevButton = document.getElementById('prevButton');
            const nextButton = document.getElementById('nextButton');
            const imageCount = document.getElementById('imageCount');

let touchstartX = 0;
            let touchendX = 0;
            const threshold = 50;

document.getElementById('app').addEventListener('touchstart', (event) => {
                touchstartX = event.changedTouches[0].screenX;
            }, false);

document.getElementById('app').addEventListener('touchend', (event) => {
                touchendX = event.changedTouches[0].screenX;
                const deltaX = touchendX - touchstartX;

if (Math.abs(deltaX) > threshold) {
                    if (deltaX > 0) {
                        currentIndex = (currentIndex - 1 + images.length) % images.length;
                    } else {
                        currentIndex = (currentIndex + 1) % images.length;
                    }

updateImage();
                }
            }, false);

updateImage();
        });
    </script>

.swipe-area img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.5s ease-in-out;
            opacity: 1;
        }

.swipe-area p {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 0.8rem;
            font-weight: bold;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.6);
            padding: 4px 8px;
            border-radius: 15px;
            text-align: center;
            z-index: 1;
        }

.bottom-btns {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }

.bottom-btns button {
            width: 80px;
            height: 40px;
            background-color: #3498db;
            color: #fff;
            border: none;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            border-radius: 5px;
        }

/* Hover effect */
        #prevButton:hover,
        #nextButton:hover {
            background-color: #2980b9;
            /* Change to your desired hover color */
        }

/* Add spacing between the buttons */
        #nextButton {
            margin-left: 10px;
        }
    </style>
</body>

</html>