Kirby网站轮播图导航箭头点击无响应问题求助

你的代码存在两个核心问题导致箭头无法正常触发切换，还有一个初始化缺失的问题，以下是具体修复方案：

问题点分析 #

1. 按钮元素未初始化：JavaScript代码直接使用buttons变量，但没有先通过选择器获取页面上的轮播按钮，导致事件监听根本没绑定到按钮上。
2. Data属性值不匹配：HTML中按钮的data-carousel-button属性值是prev-h和next-h，但JS里判断的是button.dataset.carouselButton === "next"，两者不匹配，导致点击时永远只会计算出-1的偏移量，无法触发正确的切换逻辑。

修复后的完整代码 #

HTML（保持原结构即可） #

<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') ?>"></button>
    <button class="carousel-button-h next-h" data-carousel-button="next-h">
    <img src="<?= url('assets/icons/button-next.svg') ?>">
    </button>
    <ul data-slides> 
        <li class="slide-h" data-active>
            <img src="images/Fokuss_Poster_web.jpg" alt="">
        </li> 
        <li class="slide-h">
            <img src="images/Rebooth_mockup_prints_web.jpg" alt="">
        </li>  
        <li class="slide-h">
            <img src="images/Kushim_Thumbnail_web.jpg" alt="">
        </li>  
        <li class="slide-h">
            <img src="images/Savo_Mockup_web.jpg" alt="">
        </li>
        <li class="slide-h">
            <img src="images/Foto_Zine_2Sem_12-web.jpg" alt="">
        </li>
        <li class="slide-h">
            <img src="images/Subspace_Mockup_web_0.jpg" alt="">
        </li>
        <li class="slide-h">
            <img src="images/Zeitung_Vision_06-web.jpg" alt="">
        </li>
    </ul>
</div>
</section>

JavaScript（修正初始化和属性匹配） #

// 先获取所有轮播按钮元素
const buttons = document.querySelectorAll("[data-carousel-button]");

buttons.forEach(button => {
    button.addEventListener("click",  () => {
        // 匹配HTML中的data属性值
        const offset = button.dataset.carouselButton === "next-h" ? 1 : -1;
        const slides = button
        .closest("[data-carousel]")
        .querySelector("[data-slides]");

        const activeSlide = slides.querySelector("[data-active]");
        let newIndex = [...slides.children].indexOf(activeSlide) + offset;
        if (newIndex < 0) newIndex = slides.children.length - 1;
        if (newIndex >= slides.children.length) newIndex = 0;

        slides.children[newIndex].dataset.active = true;
        delete activeSlide.dataset.active;
    })
})

CSS（保持原样式即可） #

.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;
}

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

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

额外检查项 #

如果修复后仍无法点击，可排查：

• SVG图标是否加载成功：若图标路径错误，按钮可能无可见点击区域，可临时给按钮加background-color: rgba(255,255,255,0.5)测试点击范围。
• 确保JS代码在DOM加载完成后执行：可把代码包裹在DOMContentLoaded事件监听中：

document.addEventListener('DOMContentLoaded', () => {
    // 上述JS代码放此处
});

内容的提问来源于stack exchange，提问作者finn5808