解决JavaScript轮播图导航箭头无效问题：正确初始化与遍历DOM元素

buttons.forEach(button => {
    button.addEventListener("click",  () => {
        // ... 轮播图逻辑 ...
    })
})

// 1. 精确选择所有轮播图导航按钮
const buttons = document.querySelectorAll(".carousel-button-h");

// 2. 遍历选定的按钮，并为每个按钮添加点击事件监听器
buttons.forEach(button => {
    button.addEventListener("click", () => {
        // 根据按钮的data-carousel-button属性确定偏移量
        const offset = button.dataset.carouselButton === "next-h" ? 1 : -1;

        // 查找最近的轮播容器和幻灯片列表
        const slidesContainer = button
            .closest("[data-carousel]")
            .querySelector("[data-slides]");

        // 获取当前活动的幻灯片
        const activeSlide = slidesContainer.querySelector("[data-active]");

        // 计算新幻灯片的索引
        let newIndex = [...slidesContainer.children].indexOf(activeSlide) + offset;

        // 处理边界情况，实现循环轮播
        if (newIndex < 0) {
            newIndex = slidesContainer.children.length - 1;
        }
        if (newIndex >= slidesContainer.children.length) {
            newIndex = 0;
        }

        // 移除当前活动幻灯片的data-active属性
        delete activeSlide.dataset.active;
        // 设置新幻灯片为活动状态
        slidesContainer.children[newIndex].dataset.active = true;
    });
});

<div class="carousel-h" data-carousel>
    <button class="carousel-button-h prev-h" data-carousel-button="prev-h">
        <img src="<?= url('assets/icons/button-prev.svg') ?>" alt="Previous">
    </button>
    <button class="carousel-button-h next-h" data-carousel-button="next-h">
        <img src="<?= url('assets/icons/button-next.svg') ?>" alt="Next">
    </button>
    <ul data-slides>
        <li class="slide-h" data-active>
            <img src="images/Fokuss_Poster_web.jpg" alt="Slide 1">
        </li>
        <li class="slide-h">
            <img src="images/Rebooth_mockup_prints_web.jpg" alt="Slide 2">
        </li>
        <li class="slide-h">
            <img src="images/Kushim_Thumbnail_web.jpg" alt="Slide 3">
        </li>
        <li class="slide-h">
            <img src="images/Savo_Mockup_web.jpg" alt="Slide 4">
        </li>
        <li class="slide-h">
            <img src="images/Foto_Zine_2Sem_12-web.jpg" alt="Slide 5">
        </li>
        <li class="slide-h">
            <img src="images/Subspace_Mockup_web_0.jpg" alt="Slide 6">
        </li>
        <li class="slide-h">
            <img src="images/Zeitung_Vision_06-web.jpg" alt="Slide 7">
        </li>
    </ul>
</div>

.carousel-h {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.carousel-h > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.slide-h {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: 200ms opacity ease-in-out;
    transition-delay: 200ms;
}

.slide-h > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slide-h[data-active] {
    opacity: 1;
    z-index: 1;
    transition-delay: 0ms;
}

.carousel-button-h {
    position: absolute;
    background: transparent;
    z-index: 999;
    border: none;
    font-size: 3rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 1);
    border-radius: .25rem;
    padding: 0 .5rem;
    cursor: pointer; /* 增加鼠标指针样式，提高用户体验 */
}

.carousel-button-h.prev-h {
    left: 1rem;
}

.carousel-button-h.next-h {
    right: 1rem;
}