Question

这应该是一个简单的修复，但我没有足够的经验来解决问题。我的网站在几个页面上使用IosSlider。在将图像加载到实际滑块窗口之前，IosSlider页面似乎垂直（或分散）加载图像。如何解决此问题以使滑块加载更平滑？问题发生在所有浏览器上。

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

IOSSlider的CSS：

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

谢谢你，吉尔

Answer 1

这与插件加载后图像的放置方式有关。滑块的工作方式是将每个图像放在绝对位置，并将其应用于每个图像。浮动元素只会填充其父容器的宽度，因此当元素尚未完全放置且父容器宽度为1140px时，593px的图像只能放入其中一次。

现在，这个解决方案不是100％完美，因为插件会稍微调整图像大小，但大多数情况下你可以通过设置来解决这个问题：

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

这将使您的图像与滑块的显示方式非常接近。

IosSlider图像在初始页面加载时垂直（或分散）加载

1 个答案: