Swiper 滑块垂直滚动卡在幻灯片 1 上，但水平滑动一次后效果很好

我正在做一个项目，在这个项目中我在 swiper 滑块的帮助下设计了一个页面。在我的页面中，我有来自 swiper 滑块的三个 swiper，用于水平滑动。每个 swiper 都包含动态内容。加载页面时，第一个 swiper 位于视口中，并且在垂直滚动时卡住了。水平滑动一次后，垂直滚动现在工作得很好。我尝试使用auto-height: true. 但是在应用上述内容时，我在内容下方的 swiper sheet 上留下了一个巨大的空白空间，我猜这来自三个中的最大高度 swiper sheet。

JS：-

swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationType:'custom',        
        paginationCustomRender: function (swiper, current, total) {
            if(current==1){
                if(!$("#matches").hasClass("active")){
                    $("#matches").addClass("active");
                    $("#table").removeClass("active");
                    $("#latest").removeClass("active");
                    if($(document).find(".ns_position").length > 0){
                        $('html,body').animate({scrollTop: $(".ns_position").offset().top-130}, 'fast');
                    }
                }
            }else if(current==2){
                if(!$("#table").hasClass("active")){
                    $("#table").addClass("active");
                    $("#matches").removeClass("active");
                    $("#latest").removeClass("active");
                    $(window).scrollTop(0);
                }
            }else if(current==3){
                if(!$("#latest").hasClass("active")){
                    $("#latest").addClass("active");
                    $("#matches").removeClass("active");
                    $("#table").removeClass("active");  
                    $(window).scrollTop(0);
                }
            }   

        },
        lazyLoading:true,
        autoHeight:true

    });

HTML代码：-

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
            <div>
        <div>
<div>