Question

我在固定宽度的网站上使用FlexSlider2，但我正在尝试为“全屏”视图创建一个按钮。基本上，所有按钮都将主站点的容器div更改为100％宽度并隐藏其他站点元素。

这是按钮功能的代码：

    $('.fullscreen-toggle').click(function() {
        $('#container').toggleClass('full-width', 0);
        $('#header').toggleClass('hide', 0);
        $('#menu').toggleClass('hide', 0);
        $('#lower-content').toggleClass('hide', 0);
        $('.fullscreen-toggle span').toggle();
    });

我遇到的问题是FlexSlider仅在调整窗口大小或者进入和离开焦点时（通过更改浏览器选项卡）调整其图像/幻灯片宽度。单击按钮时，我无法找到“重新加载”FlexSlider的方法，因此图像是全宽的。现在，当单击按钮时，会一次显示多个幻灯片，如下所示：http://img202.imageshack.us/img202/5308/flexsliderresizeissue.jpg

我尝试过的事情：

此插件：benalman（com）/ projects / jquery-resize-plugin /（已删除链接以满足最小链接要求）
使用.load（）尝试刷新脚本（不要认为这是.load的预期功能，但我还是试过了：S）
再次在.click（）函数中包含$('#slider').flexslider();调用
上面的事情的其他变化，也许有些我甚至不记得了！我现在已经有一段时间了

我道歉我无法直接链接到该网站，但如果您需要更多信息，请告诉我。

更新将$('ul.slides li').css("width", $('#container').width() + "px");添加到我的.click函数可以使图像大小合适，但是，仍会同时显示两张幻灯片。这次他们分成两半。

更新2 Flexslider CSS：http://pastebin.com/zVk82NkK

Answer 1

在flexslider.css文件中你有这一行吗？

.flexslider .slides img {width: 100%; display: block;}

我认为保持width: 100%足以让每次只有1张图像滑动。

在按钮单击时将容器宽度设置为100％时更新FlexSlider2宽度

1 个答案: