幻灯片:最后一张图片闪烁页面长度?
Slideshow: Last Image Flashing Length of Page?
我们的 flexslider 上最后一张图片的一小部分在幻灯片加载后立即闪烁整个页面。第一个图像设置为可见,所有其他图像设置为隐藏。并且插件在页面加载后设置为 运行。我认为可能是页面上的其他原因导致了此问题,但如果我禁用页面上除滑块之外的所有静态块,它仍然会闪烁。所以我应该因此断定它一定是滑块?这是在我们的暂存站点上发生的一个例子。只需不断点击刷新即可看到它 - http://www.shopcandelabra.com/
<script type="text/javascript">
$j(window).load(function() {
var loopCount = 0;
$j("#carousel").flexslider({
animation: "slide",
slideshowSpeed: 2000,
start: function(slider){
$('body').removeClass('loading');
},
after : function(slider){
if(slider.currentSlide == 0 && loopCount == 1){
slider.pause();
}
},
end : function(slider){
loopCount++;
}
});
});
</script>
.flexslider .slides>li:first-child {
display: block;
-webkit-backface-visibility: visible;
.flexslider .slides>li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
height: auto;
display: block;
}
将 float: left
添加到您的 li
元素。
body.cms-home .main-container #candelabra-carousel.flexslider .slides>li {
float: left;
}
原因:
修复后:
我们的 flexslider 上最后一张图片的一小部分在幻灯片加载后立即闪烁整个页面。第一个图像设置为可见,所有其他图像设置为隐藏。并且插件在页面加载后设置为 运行。我认为可能是页面上的其他原因导致了此问题,但如果我禁用页面上除滑块之外的所有静态块,它仍然会闪烁。所以我应该因此断定它一定是滑块?这是在我们的暂存站点上发生的一个例子。只需不断点击刷新即可看到它 - http://www.shopcandelabra.com/
<script type="text/javascript">
$j(window).load(function() {
var loopCount = 0;
$j("#carousel").flexslider({
animation: "slide",
slideshowSpeed: 2000,
start: function(slider){
$('body').removeClass('loading');
},
after : function(slider){
if(slider.currentSlide == 0 && loopCount == 1){
slider.pause();
}
},
end : function(slider){
loopCount++;
}
});
});
</script>
.flexslider .slides>li:first-child {
display: block;
-webkit-backface-visibility: visible;
.flexslider .slides>li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
height: auto;
display: block;
}
将 float: left
添加到您的 li
元素。
body.cms-home .main-container #candelabra-carousel.flexslider .slides>li {
float: left;
}
原因:
修复后: