为WooCommerce产品图库添加左右导航箭头后移动端交互冲突问题排查与优化咨询

我目前在使用WooCommerce搭配Bikys主题搭建电商站点，产品详情页的默认图库只能通过点击下方缩略图切换主图，为了提升用户体验，我给主图两侧添加了左右箭头按钮来实现图库切换，用下面的代码完成了功能开发：

CSS 样式代码 #

.woo-gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #ffdb00;
    font-size: 30px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    border-radius: 15px;
    transition: all 0.3s ease;
}
.woo-gallery-nav:hover {
    background: rgba(0,0,0,0.8);
}
.woo-gallery-nav.prev {
    left: 0px;
}
.woo-gallery-nav.next {
    right: 0px;
}
.flex-control-thumbs li {
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.flex-control-thumbs li.flex-active {
    opacity: 0.7;
    border: 2px solid #333;
}
.woocommerce-product-gallery__image {
    transition: opacity 0.5s ease;
}

JavaScript 交互代码 #

document.addEventListener("DOMContentLoaded", function () {
    function initializeGalleryNavigation() {
        const galleryWrapper = document.querySelector(".woocommerce-product-gallery__wrapper");
        const slides = Array.from(galleryWrapper.querySelectorAll('.woocommerce-product-gallery__image'));
        const thumbs = Array.from(document.querySelectorAll(".flex-control-thumbs li"));

        if (!slides.length || !thumbs.length) {
            setTimeout(initializeGalleryNavigation, 100);
            return;
        }

        let currentIndex = slides.findIndex(slide => slide.classList.contains('flex-active-slide'));
        if (currentIndex === -1) currentIndex = 0;

        const prevBtn = document.createElement("div");
        prevBtn.className = "woo-gallery-nav prev";
        prevBtn.innerHTML = "‹";

        const nextBtn = document.createElement("div");
        nextBtn.className = "woo-gallery-nav next";
        nextBtn.innerHTML = "›";

        galleryWrapper.parentNode.appendChild(prevBtn);
        galleryWrapper.parentNode.appendChild(nextBtn);

        function updateGallery(index) {
            if (index < 0) index = slides.length - 1;
            if (index >= slides.length) index = 0;
            thumbs[index].querySelector('img').click();
            currentIndex = index;
        }

        prevBtn.addEventListener("click", () => updateGallery(currentIndex - 1));
        nextBtn.addEventListener("click", () => updateGallery(currentIndex + 1));

        document.addEventListener("keydown", (e) => {
            if (e.key === "ArrowLeft") updateGallery(currentIndex - 1);
            if (e.key === "ArrowRight") updateGallery(currentIndex + 1);
        });

        thumbs.forEach((thumb, i) => {
            thumb.addEventListener("click", () => {
                currentIndex = i;
            });
        });
    }
    initializeGalleryNavigation();
});

功能大体能用，但在移动端遇到了一个小bug：用箭头按钮切换图片时，偶尔会和默认的缩略图点击逻辑冲突——比如点完箭头后，缩略图可能会失效；或者点了缩略图之后，箭头按钮的功能也会出问题。

我怀疑是不是事件绑定或者图库状态管理的方式有问题？有没有必要进一步优化JavaScript代码，让它能更优雅地处理移动端的交互？麻烦各位大佬帮忙看看，谢谢！

内容来源于stack exchange