0

我在一个固定宽度的网站上使用 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）
  • $('#slider').flexslider();再次在 .click() 函数中包含调用
  • 以上内容的其他变体，也许有些我什至不记得了！我已经有一段时间了

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

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

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

4

1 回答 1

0

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

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

我认为保持width: 100%每次只有一张图像滑动就足够了。

于 2013-04-18T10:22:55.497 回答