Flexslider幻灯片宽度问题 [英] Flexslider Slide Width Issue

问题描述

使用flexslider有一个奇怪的问题.幻灯片LI的宽度不正确，因此所有幻灯片都将显示出来.这仅在首页加载时发生.一旦我切换到另一个选项卡并切换回所有内容，一切看起来就很好.也许是JS加载问题?！

I have a strange issue using flexslider. The Slide LIs don't get the correct width so that all slides are shown. This only occurs on first page load. As soon as I switch to another tab and switch back everything looks fine. Maybe a JS Loading Problem?!

屏幕截图:此处

flexslider.css

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()，但是仍然是同样的问题.

I've tried it with $(document).ready(function() too, but still the same problem.

有什么想法吗?

推荐答案

Werner，

我最终找到了您的解决方案.不幸的是.

I ended up with your solution. Unfortunately.

否则，这是另一种方式.

This is otherwise another way to do it.

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

我选择不使用上面的代码的原因是，当幻灯片更新为正确的宽度时，出现了延迟并略有跳动.

The reason I chose not to use the above code is that there was a delay and made a little jump when the slides updated to the correct width.

如果有人有更清洁的解决方案-请告诉我.我正在使用最新的flexslider-有时似乎只会出现此问题.但是，当它... arghhh.

If anyone has a cleaner solution - please tell me. I am using the latest flexslider there is - and this issue only seems to occur sometimes. But when it does... arghhh.

这篇关于Flexslider幻灯片宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！