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图像在初始页面加载时垂直加载（或分散）

回答

相关问题