Swiper缩略图点击问题：主滑块需直接跳转而非逐张滚动

问题分析 #

当前Swiper缩略图联动时，主滑块会滚动经过中间所有幻灯片，这是默认联动逻辑结合缩略图swiper的freeMode属性导致的，仅设置slideToClickedSlide: false无法彻底解决该问题。

解决方案 #

我们需要手动接管缩略图的点击事件，直接让主滑块跳转到对应索引，同时保留和前后导航按钮一致的过渡动画效果：

• 关闭缩略图默认的联动跳转逻辑
• 给每个缩略图slide绑定点击事件，手动触发主滑块的精准跳转

修改后的代码 #

swiperGallery = new Swiper('.swiper-slider-' + index, {
    direction: 'horizontal',
    loop: false,
    freeMode: freeMode,
    spaceBetween: spaceBetween,
    scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true
    },
    breakpoints: {
        1440: {
            slidesPerView: getLargeDesktopSlidesCount($this),
            grid: {
                rows: getLargeDesktopRows($this),
                fill: "row"
            },
            spaceBetween: spaceBetween
        },
        1232: {
            slidesPerView: getSmallDesktopMaxSlidesCount($this),
            grid: {
                rows: getSmallDesktopMaxRows($this),
                fill: "row"
            },
            spaceBetween: spaceBetween
        },
        1024: {
            slidesPerView: numberOfSlidePerRow,
            grid: {
                rows: gridRows,
                fill: "row"
            },
            spaceBetween: spaceBetween
        },
        812: {
            slidesPerView: getMaxTabletSlidesCount($this),
            grid: {
                rows: getMaxTabletRows($this),
                fill: "row"
            },
            spaceBetween: spaceBetween
        },
        600: {
            slidesPerView: getMinTabletSlidesCount($this),
            grid: {
                rows: getMinTabletRows($this),
                fill: "row"
            },
            spaceBetween: spaceBetween
        },
        460: {
            slidesPerView: 4,
            grid: {
                rows: 3,
                fill: "row"
            },
            spaceBetween: spaceBetween
        },
        320: {
            slidesPerView: 2,
            grid: {
                rows: 6,
                fill: "row"
            },
            spaceBetween: spaceBetween
        }
    }
});

var swiper2 = new Swiper(".main-swiper-@mainSwiperGuid", {
    spaceBetween: 10,
    navigation: {
        nextEl: ".next-@nextGuid",
        prevEl: ".prev-@prevGuid",
    },
    // 关闭默认的缩略图点击跳转逻辑
    thumbs: {
        swiper: swiperGallery,
        slideToClickedSlide: false
    },
});

// 手动绑定缩略图点击事件，实现精准跳转
swiperGallery.slides.forEach(function(slide, index) {
    slide.addEventListener('click', function() {
        // 300为Swiper默认过渡速度，和导航按钮效果保持一致
        swiper2.slideTo(index, 300);
    });
});

关键说明 #

• 通过thumbs.slideToClickedSlide: false禁用默认的联动滑动逻辑，避免主滑块滚动经过中间幻灯片
• 手动监听缩略图slide的点击事件，调用slideTo方法直接跳转到目标索引，确保只执行一次过渡动画
• 过渡速度设置为300ms，和导航按钮的切换效果统一

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