页面加载时图像滑块和图像的堆叠外观

Question

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

这是 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' orvisible`。

All - 将加载所有图像，然后启动滑块 Visible ：加载可见图像，然后启动滑块。

$(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"> 并在滑块完全加载后显示它..

$(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();
            }
        });
        });