如何正确实现Glider.js回滚功能？当前反向回滚失效

数据老陈

2026-8-22

解决Glider滑块无法从最后一张跳转回第一张的问题

问题分析

你设置了rewind: true，但仅能从第一张通过prev按钮跳转到最后一张，无法从最后一张通过next按钮跳转回第一张，这大概率是scrollLock属性和rewind属性的冲突导致的——scrollLock会在滑块没有足够滚动空间时阻止滚动行为，干扰了rewind的触发逻辑。

解决方案

方案1：移除scrollLock属性

直接删除配置中的scrollLock: true，让rewind逻辑正常触发：

let slider = new Glider(document.querySelector('.glider'), {
    slidesToScroll: 1,
    slidesToShow: 1,
    draggable: true,
    rewind: true,
    arrows: {
        prev: '.glider-prev',
        next: '.glider-next'
    }
});

方案2：手动监听按钮事件（如果方案1无效）

如果移除scrollLock后仍有问题，可以手动给next按钮添加点击事件，判断当前是否处于最后一张，强制滚动到第一张：

let slider = new Glider(document.querySelector('.glider'), {
    slidesToScroll: 1,
    slidesToShow: 1,
    draggable: true,
    scrollLock: true,
    rewind: true,
    arrows: {
        prev: '.glider-prev',
        next: '.glider-next'
    }
});

// 获取next按钮
const nextBtn = document.querySelector('.glider-next');
nextBtn.addEventListener('click', () => {
    // 计算当前是否是最后一张
    const totalSlides = slider.track.childElementCount;
    const currentSlide = slider.current + 1; // current从0开始计数
    if (currentSlide === totalSlides) {
        // 滚动到第一张
        slider.scrollTo(0);
    }
});