Swiper 滑块垂直滚动卡在幻灯片 1 上,但在水平滑动一次后工作正常

Swiper slider vertical scroll stucked on slide 1 but works well after swiping horizontally once

我正在做一个项目,在这个项目中我正在使用滑动滑块设计一个页面。在我的页面中,我有三个来自 swiper slider 的滑动器,它们用于水平滑动。每个刷卡器都包含动态内容。加载页面时,第一个滑动器位于视口中,而在垂直滚动时它会卡住。水平滑动一次后,垂直滚动现在可以正常工作了。我尝试使用 auto-height: true 来解决这个问题。 但是在应用上面的内容时,我在内容下方的滑动器 sheet 上留下了一个巨大的空白 space,我猜它来自三者中最大高度的滑动器 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>

我通过自定义解决了css。

使用css:-

高度:100%,overflow:auto 在我卡在垂直滚动中的滑动滑动中。