Javascript Code for Image Advancement // Squarespace 7.1 Specific

I’m working on customizing my website and some funcationality. I recently added this which allows the user to cycle through images in a slideshow with the left and right arrows. The live website is www.gregmionske.com for reference.

<script>
document.addEventListener('keydown', function(event) {
    let buttons = document.querySelectorAll('.gallery-slideshow-control-btn');
    // Check for the right arrow key for the 'next' button
    if (event.key === "ArrowRight") {
        let nextButton = buttons.length > 1 ? buttons[1] : null; // Assumes the next button is the second button
        if (nextButton) {
            nextButton.click();
        }
    }
    // Check for the left arrow key for the 'prev' button
    else if (event.key === "ArrowLeft") {
        let prevButton = buttons.length > 0 ? buttons[0] : null; // Assumes the prev button is the first button
        if (prevButton) {
            prevButton.click();
        }
    }
});
</script>

Now I’m trying to add a function where when the user clicks on the right half of the .page-section they are able to advance to the next image and when they click on the left half they are able to go to the previous image in the gallery.

I tried using this script, however the function only appears to work on the left half of the screen for cycling through previous images. I can only advance to the next image by clicking on the actual next arrow located on the page.

document.querySelector('.page-section').addEventListener('click', function(event) {
    let bounds = this.getBoundingClientRect();
    let x = event.clientX - bounds.left;
    let buttons = document.querySelectorAll('.gallery-slideshow-control-btn');
    // If click is on the right half of the page section
    if (x > bounds.width / 2) {
        let nextButton = buttons.length > 1 ? buttons[1] : null; // Assumes the next button is the second button
        if (nextButton) {
            nextButton.click();
        }
    }
    // If click is on the left half of the page section
    else {
        let prevButton = buttons.length > 0 ? buttons[0] : null; // Assumes the prev button is the first button
        if (prevButton) {
            prevButton.click();
        }
    }
});