sw高度未正確計算，移動方向變更

頁面加載後，sw柄高度最初是正確的。將窗口大小調整爲較小時，重新計算sw height高度正確。但是，當調整窗口的大小時，大部分時間sw height高度計算不正確，和圖像部分隱藏。大部分時間，我的意思是在某個窗口大小，高度是正確的。sw高度未正確計算，移動方向變更

在移動Chrome和Safari上，當改變方向時，圖像部分隱藏。只有在上下揮動內容後，sw height的高度纔會正確，並且圖像完全可見。

swiper-container和圖像寬度爲100％以響應。

感謝您的幫助。當你在一個響應式佈局（動態高度的情況下），使用刷卡

---- -----代碼

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

來源

2015-01-11 eastwater

出現此問題。有一個修復，通過javascript通過動態高度重新switting來解決這個問題請使用此代碼。

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

來源

2015-01-13 15:02:18 oztecnic

sw高度未正確計算，移動方向變更

回答

相關問題