스 와이퍼 높이가 올바르게 계산되지 않았습니다. 모바일 방향 변경

Question

페이지로드 후 처음에는 스 와이퍼 높이가 정확합니다. 창 크기를 작게 조정하면 스 와이퍼 높이가 올바르게 계산됩니다. 그러나 창 크기를 더 크게 변경하면 스 와이퍼 높이가 대부분 계산되지 않고 이고 이미지는 부분적으로 숨겨져 있습니다. 대부분의 경우, 특정 창 크기에서 높이가 정확하다는 것을 의미합니다.

모바일 Chrome 및 Safari에서 방향을 변경하면 이미지가 부분적으로 표시되지 않습니다. 내용을 위아래로 스 와이프 한 후에 만 ​​스 와이퍼 높이가 정확 해지고 이미지가 완전히 보입니다.

swiper-container 및 Images 너비는 100 %입니다. 도움을

감사합니다. 당신이 응답 레이아웃 (동적 높이의 경우)에 swiper을 사용하는 경우

---- 코드는 -----

<link rel="stylesheet" href="idangerous.swiper.css"> 
<style> 
.swiper-container { 
    width: 100%; 
    text-align: center; 
} 
.pagination { 
    position: absolute; 
    left: 0; 
    text-align: center; 
    bottom:5px; 
    width: 100%; 
} 
.swiper-pagination-switch { 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    border-radius: 10px; 
    background: #999; 
    box-shadow: 0px 1px 2px #555 inset; 
    margin: 0 3px; 
    cursor: pointer; 
} 
.swiper-active-switch { 
    background: #fff; 
} 
</style> 

<div class="swiper-container"> 
     <div class="swiper-wrapper"> 
     <div class="swiper-slide"> <img src="images/slide1.png" width="100%" /> </div> 
     <div class="swiper-slide"> <img src="images/slide2.png" width="100%" /> </div> 
     <div class="swiper-slide"> 
      <div class="content-slide"> 
      <p class="title">Slide with HTML</p> 
      <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p> 
      </div> 
     </div> 
    </div> 
    <div class="pagination"></div> 
</div> 

<script src="idangerous.swiper.min.js"></script> 
<script> 
$(function() { 
    var mySwiper = new Swiper('.swiper-container',{ 
    pagination: '.pagination', 
    loop:true, 
    grabCursor: true, 
    paginationClickable: true, 
    autoplay:3000, 
    roundLengths: true, 
    calculateHeight:true 
    }); 
}); 
</script> 

<div>Some content goes here. .... </div> 

Answer 1

이 문제가 발생합니다. 자바 스크립트를 통해 동적 인 높이를 가진 스 와이퍼를 다시 끼워줌으로써 이것을 해결할 수있는 수정 사항이 있습니다.이 코드를 사용하십시오.

$(window).resize(function(){ 
 
    mySwiper.reInit() // or mySwiper.resizeFix() 
 
});