我的响应式 flexslider 插件有问题。除非实际幻灯片中有很多图像,否则该插件可以正常工作。那么加载行为是不可接受的。
我希望有人可以帮助我使用以下 flexslider 图像预加载器脚本,因为我无法让它工作。
这是我正在使用的代码:
柔性滑块 HTML
<div class="slider">
<div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">
<ul class="slides" style="width: 5200%; -webkit-transition-duration: 0s; -webkit-transform: translate3d(-9702px, 0px, 0px); ">
<li style="float: left; display: block; width: 940px; ">
<img src="image1.jpg">
</li>
<li style="float: left; display: block; width: 940px; ">
<img src="image2.jpg">
</li>
<li style="float: left; display: block; width: 940px; ">
<img src="image3.jpg">
</ul>
</div>
HTML HEAD 中的 FLEXSLIDER 脚本
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
controlsContainer: ".slider"
start: function(slider) {
slider.removeClass('loading');}
});
});
</script>
FlexSlider.CSS
.loading {min-height: 300px; background: url('loader.gif') no-repeat center center;}
任何帮助表示赞赏!
不要使用 flexslider 中的滑块对象,而是尝试将滑块元素本身设为 jQuery 对象。
<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
var target_flexslider = $('.flexslider');
target_flexslider.flexslider({
animation: "slide",
slideshow: false,
controlsContainer: ".slider",
start: function(slider) {
target_flexslider.removeClass('loading');
}
});
});
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)