0

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

问题是，在页面加载时，幻灯片会同时显示所有幻灯片，而且尺寸比预期的要小得多。但是，如果我从窗口切换焦点（即在浏览器选项卡之间切换或移动到另一个程序并返回），幻灯片现在正在工作并且幻灯片大小合适。这也发生在移动设备中。

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

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

其中隐藏了一张幻灯片。此外，ul.slides 中的列表项还有另一个规则，它为它们提供了初始宽度，这对于所有滑块来说甚至都不相同，所以我不明白它来自哪里。

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

4

1 回答 1

1

我想我已经弄清楚了，至少原则上...

.flexslider{display:none;}似乎摆脱了 Flexslider 的重新调整大小功能。您可以将其删除，但这会导致一些丑陋的加载。

为了避免说丑陋的加载，我整理了一个快速的解决方法-jsFiddle

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

加载时仍然有一个快速故障，但希望它至少可以引导您朝着正确的方向前进。

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

$(".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');
    });
});

这种解决了迷你图片问题，但充其量只是参差不齐。

于 2013-05-08T03:45:23.320 回答