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

Question

I am working on a project in which I am designing a page with the help of swiper slider. In my page, I have three swipers from swiper slider which is meant to swipe horizontally. Each swiper contains dynamic content. Onloading the page the first swiper is in the viewport and while scrolling vertically it gets stuck. After swiping horizontally once, the verticle scroll now works absolutely fine. I tried to solve this using auto-height: true. But on applying the above I am left with a huge blank space on the swiper sheet below the content which I guess comes from the maximum height swiper sheet among the three.

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 code:-

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

Answer 1

I solved it through custom css.

Using css:-

height:100%, overflow:auto in the swiper-slide where I was getting stuck in verticle scroll.