如何修改Swiper JS的swiper-button-prev/next按钮实现跨HTML跳转？

问题描述 #

在Swiper JS的缩略图画廊组件中，swiper-button-prev/next按钮默认逻辑为：处于第一张幻灯片时禁用prev按钮，处于最后一张幻灯片时禁用next按钮。需要修改该按钮功能，使其点击后跳转到指定HTML文件。此前尝试将导航按钮放置在每个swiper-slide元素内，通过onclick="window.location.href"实现跳转，但存在代码重复问题。

解决方案 #

完全可以基于默认导航按钮实现自定义跳转，无需重复编写代码，核心思路是监听按钮点击事件，结合当前幻灯片索引判断执行默认切换还是页面跳转。

步骤1：定义跳转规则 #

提前设定跳转场景，比如：

• 第一张幻灯片点击prev按钮时跳转到首页
• 最后一张幻灯片点击next按钮时跳转到下一个页面
• 其他场景保持默认幻灯片切换逻辑

步骤2：修改JavaScript代码 #

在原有Swiper初始化代码基础上，添加按钮点击事件监听逻辑：

//Initialize Swiper
var swiperThumbs = new Swiper(".myThumbs", {
    slidesPerView: 1,
    spaceBetween: 6,
    breakpoints: {
        "@0.00": {
            slidesPerView: 4,
        },
        "@.75": {
            slidesPerView: 6,
        },
        "@1.00": {
            slidesPerView: 8,
        },
        "@1.50": {
            slidesPerView: 10,
        },
    },
    centeredSlides: true,
    loop: false,
    slideToClickedSlide: true,
});
var swiperSlider = new Swiper(".mySlider", {
    slidesPerView: 1,
    centeredSlides: true,
    speed: 500,
    effect: 'fade',
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    keyboard: {
        enabled: true,
    },
    pagination: {
        el: ".swiper-pagination",
        type: "progressbar"
    },
});

//Initialize Vanilla Lazy-Load
var lazyLoadInstance = new LazyLoad({
    // Your custom settings go here
});

swiperThumbs.controller.control = swiperSlider;
swiperSlider.controller.control = swiperThumbs;

// 修正原高度计算逻辑，添加单位确保样式生效
var thumbsHeight = document.querySelector('.myThumbs').offsetHeight;
document.querySelector('.mySlider').style.height = `calc(100vh - ${thumbsHeight}px)`;

// -------------------------- 自定义跳转逻辑 --------------------------
// 配置跳转地址，可根据需求修改
const jumpSettings = {
    firstSlidePrevUrl: 'Index.html',       // 第一张幻灯片点击prev的跳转地址
    lastSlideNextUrl: 'Next_Page.html'     // 最后一张幻灯片点击next的跳转地址
};

// 监听prev按钮点击
document.querySelector('.swiper-button-prev').addEventListener('click', function(e) {
    const currentIndex = swiperSlider.activeIndex;
    // 若当前是第一张幻灯片，执行跳转
    if (currentIndex === 0) {
        e.preventDefault();
        window.location.href = jumpSettings.firstSlidePrevUrl;
    }
    // 否则保持默认切换逻辑
});

// 监听next按钮点击
document.querySelector('.swiper-button-next').addEventListener('click', function(e) {
    const currentIndex = swiperSlider.activeIndex;
    const totalSlides = swiperSlider.slides.length;
    // 若当前是最后一张幻灯片，执行跳转
    if (currentIndex === totalSlides - 1) {
        e.preventDefault();
        window.location.href = jumpSettings.lastSlideNextUrl;
    }
    // 否则保持默认切换逻辑
});

关键说明 #

1. 避免代码重复：直接复用默认的swiper-button-prev/next按钮，无需在每个幻灯片内重复添加按钮元素。
2. 灵活配置：通过jumpSettings对象可快速修改跳转地址，支持扩展更多自定义跳转规则（比如指定某几个索引的幻灯片跳转）。
3. 兼容原有逻辑：仅在特定场景下触发跳转，其他场景保持Swiper默认的幻灯片切换行为。
4. 修复样式问题：修正了原代码中高度计算缺少单位的问题，确保幻灯片容器高度正确。

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