javascript - 图像 slider 和页面加载时图像的堆叠外观

Question

我正在尝试使用此链接添加图像 slider BxSlider除了在页面加载时加载 slider 图像外， slider 中的所有内容都运行良好。当页面加载时，所有图像都以堆叠方式一个接一个地垂直显示，我无法解决。

这是 HTML ..

<div id="slider" style="padding-top:77px;">
<ul class="bxslider">
 <li>
  <img src="img/new_images/dots.jpg" />

 </li>
 <li>
  <img src="img/new_images/workforce.jpg" />

 </li>
 <li>
  <img src="img/new_images/telecom.jpg" />

 </li>
 <li>
  <img src="img/new_images/expectations.jpg" />

 </li>
 </ul>

这是它的 jquery..

$(document).ready(function () {
       $('.bxslider').bxSlider({
            mode: 'fade',
            adaptiveHeight: 'true',
            speed: 3000,
            easing: 'ease-in-out',
            auto: true,
            autoHover: true,
            pager: false
        });
        });

请帮帮我..

Answer 1

添加preloadImages选项并将其设置为 all' or可见`。

All - 将加载所有图像，然后启动 slider 可见:加载可见图像，然后启动 slider 。

$(document).ready(function () {
       $('.bxslider').bxSlider({
            mode: 'fade',
            adaptiveHeight: 'true',
            speed: 3000,
            easing: 'ease-in-out',
            auto: true,
            autoHover: true,
            preloadImages : 'all',
            pager: false
        });
        });

解决方案 2:

隐藏父 div <div id="slider">并在 slider 完全加载后显示..

$(document).ready(function () {
       $("#slider").hide();
       $('.bxslider').bxSlider({
            mode: 'fade',
            adaptiveHeight: 'true',
            speed: 3000,
            easing: 'ease-in-out',
            auto: true,
            autoHover: true,
            preloadImages : 'all',
            pager: false,
            onSliderLoad : function(){
               $("#slider").fadeIn();
            }
        });
        });