FlexSlider 2 调整窗口大小 [英] FlexSlider 2 resizing on window resize

问题描述

我正在为基于 Twitter Bootstrap 的 WordPress 制作一个响应式主题.我正在使用主页上的 FlexSlider 幻灯片 jquery 插件.

I'm making a responsive theme for WordPress built on Twitter Bootstrap. I'm using the FlexSlider slideshow jquery plugin on the homepage.

不幸的是，当我调整浏览器大小时，FlexSlider 无法正常调整大小.当我变窄时，图像可能会被裁剪掉......如果我变宽，下一张图像的一部分可能会出现在侧面.即使我使用来自 FlexSlider 网站的演示代码，也会发生这种情况.它甚至发生在 FlexSlider 演示中.但是 Dany Duchaine 的 [Energized theme][3] 设法随着视口的变化很好地调整了 FlexSlider 的大小.任何人都可以解释他是如何做的，或者建议我可以改进我的版本的行为吗?

Unfortunately, when I resize my browser, FlexSlider doesn't resize gracefully. When I go narrower, the image is liable to get cropped off.. if I go wider, part of the next image can appear to the side. This happens even when I use the demo code from the FlexSlider website. It even happens on the FlexSlider demo. But Dany Duchaine's [Energized theme][3] manages to resize FlexSlider nicely as the viewport changes. Can anyone explain how he's doing it, or suggest any way I can improve the behaviour of my version?

谢谢！

推荐答案

你可能已经有了解决方案或者在这个阶段已经继续前进，但我想我会在 github 上为访问者指出这个问题:https://github.com/woothemes/FlexSlider/issues/391(注意 patbouche 的回答).这个解决方案对我有用.我把它放在 after: 回调中.

You probably have a solution or have moved on at this stage but I thought I'd point out this issue on github for visitors: https://github.com/woothemes/FlexSlider/issues/391 (note patbouche's answer). This solution worked for me. I put it in the after: callback.

var slider1 = $('#slider1').data('flexslider');
slider1.resize();

这篇关于FlexSlider 2 调整窗口大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！