Swiper.js实现导航按钮同步对应幻灯片data属性文本

问题需求 #

需要将上一页（prev）、下一页（next）按钮旁的文本，替换为对应目标幻灯片的data-currentslide属性值，且在loop循环模式下能正确处理边界场景。

当前代码的问题 #

原updateCaptionText函数直接通过slider.realIndex - 1和slider.realIndex + 1获取索引，在loop模式下会出现索引越界（比如当前是第一张幻灯片时，realIndex - 1为-1，无法获取有效元素），导致文本更新失败。

修正后的代码实现 #

核心文本更新函数 #

let prev = document.querySelector('.prev');
let next = document.querySelector('.next');

function updateCaptionText(slider) {
    let prev_text = document.querySelector('.prev-text');
    let next_text = document.querySelector('.next-text');
    
    // 获取原始幻灯片总数（排除loop模式自动克隆的副本）
    const originalSlideCount = slider.originalSlides.length;
    // 计算上一张幻灯片的索引，用取模处理循环边界
    const prevSlideIndex = (slider.realIndex - 1 + originalSlideCount) % originalSlideCount;
    // 计算下一张幻灯片的索引，用取模处理循环边界
    const nextSlideIndex = (slider.realIndex + 1) % originalSlideCount;
    
    // 获取对应幻灯片的data-currentslide值
    const prevSlideText = slider.originalSlides[prevSlideIndex].dataset.currentslide;
    const nextSlideText = slider.originalSlides[nextSlideIndex].dataset.currentslide;
    
    // 更新文本（用textContent更安全，适合纯文本场景）
    prev_text.textContent = prevSlideText;
    next_text.textContent = nextSlideText;
}

关键改动说明 #

1. 使用originalSlides数组：该数组仅包含你手动定义的原始幻灯片，排除了loop模式下Swiper自动克隆的首尾副本，确保索引计算准确。
2. 取模处理边界：通过(索引 + 总数) % 总数的方式，实现循环场景下的索引自动回绕，避免越界问题。
3. 替换innerHTML为textContent：针对纯文本更新，textContent更安全，不会引入XSS风险，性能也更优。

额外说明 #

如果需要将文本直接放入按钮内部而非旁边的span，只需修改选择器和赋值目标：

// 改为选择按钮元素
let prevBtn = document.querySelector('.prev');
let nextBtn = document.querySelector('.next');

// 在函数内更新按钮文本
prevBtn.textContent = prevSlideText;
nextBtn.textContent = nextSlideText;

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