点击缩略图触发显示的Swiper滑块导航功能失效问题排查求助

你猜的没错！问题根源就是Swiper在隐藏容器中初始化了。因为.gallery-slider默认是display: none，Swiper初始化时需要读取容器的宽高、位置等布局信息来计算滑块的排列和交互逻辑，但隐藏元素的尺寸都是0，导致Swiper的导航、滑动等核心功能无法正常初始化，所以点击prev/next按钮没反应。

下面给你两个可行的解决方案：

方案一：第一次点击缩略图时再初始化Swiper #

把Swiper的初始化逻辑放到点击事件里，只有当用户第一次点击缩略图、滑块容器显示后，才创建Swiper实例。这样能确保初始化时容器是可见的，布局参数能正确读取。

修改后的JS代码：

var swiper;

$( '.gallery-thumbnails a[data-slide]' ).on( 'click', function( e ) {
    e.preventDefault();
    $( '.gallery-thumbnails' ).hide();
    $( '.gallery-slider' ).show();

    // 只有当swiper未初始化时才创建实例
    if (!swiper) {
        swiper = new Swiper( '.gallery-slider .swiper-container', {
            loop: true,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: '.swiper-next',
                prevEl: '.swiper-prev',
            },
        });
    }

    var slideno = $( this ).data( 'slide' );
    swiper.slideTo( slideno + 1, false, false );
});

$( '.gallery-slider .close' ).on( 'click', function( e ) {
    e.preventDefault();
    $( '.gallery-slider' ).hide();
    $( '.gallery-thumbnails' ).show();
});

方案二：初始化时临时显示容器，完成后再隐藏 #

如果希望页面加载时就完成Swiper初始化（比如预加载资源），可以在初始化前临时显示.gallery-slider，初始化完成后再隐藏它。这样Swiper能正确获取布局信息，后续显示时功能就正常了。

修改后的JS代码：

var swiper;

// 初始化前临时显示滑块容器
$('.gallery-slider').show();
swiper = new Swiper( '.gallery-slider .swiper-container', {
    loop: true,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: '.swiper-next',
        prevEl: '.swiper-prev',
    },
    // 初始化完成后隐藏容器
    on: {
        init: function() {
            $('.gallery-slider').hide();
        }
    }
});

$( '.gallery-thumbnails a[data-slide]' ).on( 'click', function( e ) {
    e.preventDefault();
    $( '.gallery-thumbnails' ).hide();
    $( '.gallery-slider' ).show();
    var slideno = $( this ).data( 'slide' );
    swiper.slideTo( slideno + 1, false, false );
});

$( '.gallery-slider .close' ).on( 'click', function( e ) {
    e.preventDefault();
    $( '.gallery-slider' ).hide();
    $( '.gallery-thumbnails' ).show();
});

两种方案都能解决你的问题，你可以根据自己的需求选择：如果不需要预加载，方案一更轻量；如果需要提前初始化Swiper（比如处理懒加载图片），方案二更合适。

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