幻灯片:上一页图像闪烁的页面长度?

时间:2015-08-13 21:38:56

标签: javascript css slideshow 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;
}

1 个答案:

答案 0 :(得分:2)

float: left添加到您的li元素中。

body.cms-home .main-container #candelabra-carousel.flexslider .slides>li {
  float: left;
}

<强>可造成:

enter image description here

修复后:

enter image description here