我正在使用bxSlider在客户的网站上显示我的主页幻灯片。它工作得很好,是一个非常好的功能包装,免费,滑动工具,所以我不能抱怨。
但是,在bxslide网站上,他们有加载窗格显示何时未加载图像。加载图像后,它会显示加载的图像。然而,在我的网站上,没有加载图像时没有加载图像,它就像你在下面的图像中看到的一样折叠,直到图像加载到足以填充空间
然后它突然加载,并且有一个像这样的图像
为什么我在等待图像加载时没有在该空间中填充加载图标?这是我用来调用我的滑块的jquery
slider = $('.bxslider').bxSlider({
auto: true,
mode: 'fade',
pause: 10000,
speed: 2000,
pager: false,
useCSS: false
});
slider.goToSlide(1);
滑块的HTML
<div class="slider">
<ul class="bxslider">
<li><a href="#"><img src="image.png" alt="Banner" /></a></li>
</ul>
</div>
最后这里是一个带有我所有css的codePen,因为要发布到SO太多了。
答案 0 :(得分:2)
将adaptiveHeight
选项添加到bxSlider
初始化中。
如果没有加载图像,幻灯片的默认设置是高度为0.如果包含自适应高度属性,幻灯片高度将永远不会为0(除非确实没有图像你的幻灯片)。
slider = $('.bxslider').bxSlider({
auto: true,
adaptiveHeight: true,
mode: 'fade',
pause: 1000,
speed: 2000,
pager: false,
useCSS: false
});
slider.goToSlide(1);