手风琴内的flexslider行为问题

问题描述

我有一个测试页以更好地解释我的问题.我在列表中有几项(它们是测试页上的图像)；当我单击其中之一时，使用flexslider的相应幻灯片会向下滑动.

I have a test page to better explain my problem. I have several items on a list (they're images on the test page); when I click on one of them, a corresponding slideshow, using flexslider, sldes down.

问题在于，在页面加载时，幻灯片会一次显示所有幻灯片，其大小比预期的要小得多.但是然后，如果我从窗口切换焦点(即在浏览器选项卡之间切换或移至另一个程序然后返回)，则幻灯片现在可以正常工作，并且幻灯片大小合适.这也发生在移动设备中.

The problem is that, on page load, the slideshow shows all slides at once, at a much smaller size than intended. But then, if I switch the focus from the window (i.e. switch between browser tabs or move to another program and come back), the slideshow is now working and the slides are the proper size. This happens in mobile devices too.

当我检查萤火虫时，有一个element.style规则适用于ul.slides:

When I check with firebug, there's an element.style rule applying to ul.slides:

transform: translate3d(-89px, 0px, 0px);

其中隐藏了一张幻灯片.此外，对于ul.slides中的列表项还有另一个规则，该规则为其赋予了初始宽度，对于所有滑块甚至都不相同，因此我不知道它的来源.

Which hides one of the slides. Additionally, there's another rule for the list items inside ul.slides that gives them their initial width, which is not even the same for all sliders so I don't understand where it is coming from.

有人可以看看并提出修复建议吗?我尝试覆盖element.style规则，但到目前为止没有成功.

Can someone take a look and suggest a fix? I've tried overriding the element.style rule but so far unsuccessfully.

推荐答案

我认为我已经弄清楚了，至少在原则上...

I think I've figured it out, in principal at least...

.flexslider{display:none;}似乎取消了Flexslider的调整大小功能.您可以将其删除，但这会造成一些丑陋的加载.

.flexslider{display:none;} seems throw off the re-size function of Flexslider.You could just remove it, but that makes for some ugly loading.

为避免造成上述麻烦，我整理了一个快速的解决方法- jsFiddle

To avoid said ugly loading I put together a quick, work-around- jsFiddle

$(document).ready(function(){
    $(".flexslider").css('display','block').slideUp();
});

在加载时仍然会有一个小故障，但是希望它至少可以将您引向正确的方向.

There's a still a quick glitch while loading, but hopefully it will at least steer you in the right direction.

我玩过的另一种方法是尝试像这样强制调整大小功能-

Another method I played with a bit was to try and force the re-size function like so-

$(".client").click(function () {
    $('.flexslider').resize();    // Problematic but promising
    var project = this.id;
    var project_id = '#' + project + '-project';
    var elem = $(".flexslider:visible").length ? $(".flexslider:visible"): $(".flexslider:first");
    elem.slideUp('slow', function () {
        $(project_id).slideDown('slow');
    });
});

这种方法解决了缩影问题，但充其量是不完善的.

This sort of solved the mini-picture issue, but was spotty at best.

这篇关于手风琴内的flexslider行为问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！