Flexslider滑动宽度问题

Question

我有一个使用flexslider的奇怪问题.幻灯片LI没有获得正确的宽度,因此显示了所有幻灯片.这仅在首页加载时发生.一旦我切换到另一个标签并切换回一切看起来很好.也许JS加载问题？!

截图:这里

flexslider.css

.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {text-align: center; display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides li.flex-active-slide img {text-align:center; width: auto; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); }

JS

$(window).load(function() {
    $('.flexslider').flexslider({
        controlNav: true,
        directionNav: true
    }); 
});

我用$(document).ready(function()也尝试了它,但仍然是同样的问题.

有任何想法吗？

Answer 1

嗯,Werner.

我最终得到了你的解决方案.不幸.

这是另一种方法.

/* SLIDERS in content */
$('.flexslider').flexslider({
    animation: "slide", 
    start: function(slider){
        $('.flexslider').resize();
    }
});

我选择不使用上述代码的原因是,当幻灯片更新到正确的宽度时,有一个延迟并略微跳转.

如果有人有更清洁的解决方案 - 请告诉我.我正在使用最新的flexslider - 这个问题似乎有时只会发生.但是当它确实...... arghhh.

Answer 2

我有同样的问题.

在第一次加载会话时,Flexslider获取滑块容器的宽度,如果它不明确,则其值为0px.然后幻灯片的宽度为0px,您无法看到它们.

为了避免这个问题足以在滑块容器中修复宽度,在我的情况下为604px:

<div class="flexslider" style="width: 604px">
    <ul class="slides">
        <li>
            <img id="slide1" />
        </li>
        <li>
            <img id="slide2" />
        </li>
    </ul>
</div>

Answer 3

下面的代码/命令可能会有所帮助；好吧，至少我已经成功了。

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script defer src="js/jquery.flexslider-min.js"></script>
<script>
$(document).ready(function(){
    $('.flexslider').flexslider({
        controlNav: true,
        directionNav: true,
     });
}); 
</script>