스 와이프 슬라이더 수직 스크롤은 슬라이드 1에 붙어 있지만 가로로 한 번 스 와이프하면 잘 작동합니다.

Question

나는 스 와이프 슬라이더의 도움으로 페이지를 디자인하고있는 프로젝트에서 작업 중입니다. 내 페이지에는 가로로 스 와이프하기위한 스 와이프 슬라이더에서 3 개의 스 와이프가 있습니다. 각 swiper에는 동적 컨텐츠가 들어 있습니다. 첫 번째 swiper가 뷰포트에 페이지를로드하고 수직으로 스크롤하는 동안 멈추게됩니다. 한 번 수평으로 한 번 스 와이프 한 후에는 수직 스크롤이 이제는 정상적으로 작동합니다. 나는 이것을 auto-height: true을 사용하여 풀려고했다. 그러나 위의 내용을 적용 할 때 세 가지 중에서 최대 높이의 스 와이퍼 시트에서 비롯되는 콘텐츠 아래의 스 와이퍼 시트에 거대한 공백이 남습니다.

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> 

Answer 1

나는 사용자 정의 CSS를 통해 해결했다.

사용 CSS : -

높이 : 100 %, 오버 플로우 : 나는 verticle 스크롤에 갇히지 된 swiper 슬라이드 자동.