IosSlider圖像在初始頁面加載時垂直加載（或分散）

這應該是一個簡單的修復，但我沒有足夠的經驗來解決問題。我的網站在幾個頁面上使用IosSlider。在將圖像加載到實際的滑塊窗口之前，IosSlider頁面會顯示爲垂直（或分散）加載圖像。我如何解決這個問題，使滑塊負載更平滑？這個問題發生在所有瀏覽器上。IosSlider圖像在初始頁面加載時垂直加載（或分散）

http://www.restipe.com/Residential/elegant-home.html

CSS的IOSSlider：

 .responsiveHeight { 
      height: 0; 
      padding: 0 0 40% 0; /* responsive slider height = 40% of the browser width */ 
      position: relative; 
      overflow: visible; 
     } 

     .responsiveHeight > .inner { 
      position: absolute; 
      width: 100%; 
      height: 100%; 

     } 

     .iosSlider { 
      width: 100%; 
      height: 100%; 

     } 

     .iosSlider .slider { 
      width: 100%; 
      height: 100%; 
     } 

     .iosSlider .slider img { 
      float: left; 
      height: 100%; 
      padding-right:2px; 
     } 

     .responsiveHeight .prevButton { 
      position: absolute; 
      top: 50%; 
      left: 1%; 
      width: 20px; 
      height: 40px; 
      background-image: url(../images/prev.png);  
      z-index: 2; 
     } 

     .responsiveHeight .nextButton { 
      position: absolute; 
      top: 50%; 
      right:1%; 
      width: 20px; 
      height: 40px; 
      background-image: url(../images/next.png);   
      z-index: 2; 
     }

的Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">  </script>

<script type="text/javascript" src="../js/jquery.iosslider.js"></script> 


<!--IosSlider --> 
    <script> 
     $(window).load(function() { 

      $('.iosSlider').iosSlider({ 
      desktopClickDrag: true, 
      navNextSelector: $('.nextButton'), 
      navPrevSelector: $('.prevButton') 

      }); 

     }); 
    </script>

謝謝， Jill

來源

2015-02-05 Jill Mark

沒有小提琴很難啾啾你的CSS來嘗試解決你的問題。看起來像你的滑塊的容器需要溢出：隱藏（或他們的父母之一） – 2015-02-05 15:15:28

這與插件加載後如何放置圖像有關。滑塊工作的方式是將每個圖像放置在絕對位置，並將其應用於每個圖像。浮動元素只會填充到其父容器的寬度，所以當元素還沒有完全放置，並且父容器寬度爲1140px時，593px的圖像只會在其內部放置一次。現在

，該解決方案是不是100％的完美，因爲插件調整大小的圖像一點點，但在大多數情況下，你可以通過設置解決這個問題：

.iosSlider { overflow: hidden; } 
.iosSlider .slider { width: 99999px; }

這將讓你的圖像排列非常接近滑塊將如何顯示它們。

來源

2015-02-05 15:15:19 Chad

謝謝你的幫助。設置{overflow：hidden}工作。我不需要以像素爲單位設置滑塊的寬度。我知道這是一個簡單的解決方案，我無法弄清楚。 – 2015-02-06 22:12:13

IosSlider圖像在初始頁面加載時垂直加載（或分散）

回答

相關問題