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

我在固定宽度的站点上使用FlexSlider2，但正在尝试为“全屏”视图制作按钮。基本上，所有按钮都是将主站点的容器div更改为100％宽度并隐藏其他站点元素。当按钮单击容器宽度设置为100％时更新FlexSlider2宽度

这里是我的按钮的功能代码：

$('.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）/项目/ jQuery的调整，插件/（链接删除，以满足分钟链接要求）
使用.load（）来尝试刷新脚本（不要认为这是.load的预期功能，但无论如何我尝试了：S）
包括$('#slider').flexslider();再次调用.click（）函数
其他上面的东西的变化，也许有些我甚至不记得！我一直在这一段时间

我很抱歉我不能直接链接到该网站，但如果您需要了解更多信息，请让我知道。

更新添加$('ul.slides li').css("width", $('#container').width() + "px");我。点击函数获取的图像是正确的尺寸，然而，两个幻灯片同时仍显示。这一次他们分成两半。

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

来源

2013-04-18 Preston

在flexslider.css文件你有这条线？

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

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

来源

2013-04-18 10:22:55

我确实在我的CSS中，我已经将我的CSS文件添加到原始问题了。使li标签与容器的宽度相同解决了我的尺寸问题，现在只需让幻灯片再次正确对齐即可。 – Preston

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

回答

相关问题