Javascript FlexSlider 2 调整窗口大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11818356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
FlexSlider 2 resizing on window resize
提问by And Finally
I'm making a responsive theme for WordPress built on Twitter Bootstrap. I'm using the FlexSliderslideshow jquery plugin on the homepage.
我正在为基于 Twitter Bootstrap 的 WordPress 制作一个响应式主题。我在主页上使用FlexSlider幻灯片 jquery 插件。
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?
不幸的是，当我调整浏览器大小时，FlexSlider 无法正常调整大小。当我变窄时，图像可能会被裁剪掉......如果我变宽，下一张图像的一部分可能会出现在侧面。即使我使用来自 FlexSlider 网站的演示代码，也会发生这种情况。它甚至发生在 FlexSlider 演示中。但是 Dany Duchaine 的 [Energized theme][3] 设法随着视口的变化很好地调整了 FlexSlider 的大小。任何人都可以解释他是如何做的，或者建议我可以改进我的版本的行为吗？
Thanks!
谢谢！
回答by byronyasgur
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.
您可能有解决方案或在此阶段已继续前进，但我想我会在 github 上为访问者指出这个问题：https: //github.com/woothemes/FlexSlider/issues/391（注意 patbouche 的回答）。这个解决方案对我有用。我把它放在after:回调中。
var slider1 = $('#slider1').data('flexslider');
slider1.resize();
回答by Jacob Mitchell
I combined a couple of these solutions and also added a check to make sure the slider existed on the page first.
我结合了几个这些解决方案，并添加了一个检查以确保滑块首先存在于页面上。
$(function() {
var resizeEnd;
$(window).on('resize', function() {
clearTimeout(resizeEnd);
resizeEnd = setTimeout(function() {
flexsliderResize();
}, 250);
});
});
function flexsliderResize(){
if ($('.flexslider').length > 0) {
$('.flexslider').data('flexslider').resize();
}
}
回答by Natacha Beaugeais
I had to bind the window resize event in order to get this working reliably. Since the FlexSlider beforeand aftercallbacks did not work for me:
我必须绑定窗口调整大小事件才能使其可靠地工作。由于FlexSlider之前和之后的回调并没有为我工作：
$(window).bind('resize', function() {
setTimeout(function(){
var slider = $('#banner').data('flexslider');
slider.resize();
}, 1000);
});
回答by Guern
I think it is better to put it into beforecallback:
我认为最好在回调之前放入：
$('.flexslider').flexslider({
// your settings
before: function(slider){
$('.flexslider').resize();
}
});
回答by user3365052
I tried many way, then I did this
我尝试了很多方法，然后我做到了
if( jQuery('.iframe').length ){
var interval = window.setInterval(function() { jQuery('.flexslider').resize(); }, 100);
window.setTimeout(function(){
clearInterval(interval);
},4000);
}
回答by Tiago Duarte
just wanted to add yet another alternative in case someone is still experiencing the "flexslider resizes to higher width, but not lower"problem
只是想添加另一个替代方案，以防有人仍然遇到“flexslider 调整为更高的宽度，但不是更低”的问题
user "PCandtheWeb" suggested adding the below in case you have a wrapping table, which appears to get the job done
用户“PCandtheWeb”建议添加以下内容，以防您有一个包装表，这似乎可以完成工作
.your-table
{
table-layout: fixed
}
回答by chakmear
I've also tried many ways but none where really working... Then I did it manually, and it works now: Save the slider data before changed by flexslider, when window is resizing: destroy flexslider (https://stackoverflow.com/a/16334046/7334422) and delete node completely, manually add original slider node that was saved in data, add it again and initialize flexslider... because this is quite expensive I also added a resized method (https://stackoverflow.com/a/40534918/7334422), in order to not being executed while resizing... Yes it is some code and it's a bit hacky, but it's working :)
我也尝试了很多方法，但没有一个真正有效......然后我手动完成了它，现在它可以工作：在调整窗口大小时保存滑块数据之前由 flexslider 更改：destroy flexslider ( https://stackoverflow.com /a/16334046/7334422）并完全删除节点，手动添加保存在数据中的原始滑块节点，再次添加并初始化flexslider...因为这非常昂贵我还添加了一个调整大小的方法（https://stackoverflow.js）。 com/a/40534918/7334422），为了在调整大小时不被执行......是的，它是一些代码，它有点hacky，但它正在工作:)
$.fn.resized = function (callback, timeout) {
$(this).resize(function () {
var $this = $(this);
if ($this.data('resizeTimeout')) {
clearTimeout($this.data('resizeTimeout'));
}
$this.data('resizeTimeout', setTimeout(callback, timeout));
});
};
function myFlexInit(slider){
slider.data("originalslider", slider.parent().html());
slider.flexslider({
animation: "slide",
//... your options here
});
}
$(".flexslider").each(function() {
myFlexInit($(this));
});
$(window).resized(function(){
$(".flexslider").each(function() {
$(this).removeData("flexslider");
parent = $(this).parent();
originalslider = $(this).data("originalslider");
$(this).remove();
parent.append(originalslider);
newslider = parent.children().first();
myFlexInit(newslider);
});
}, 200);
You better wrap your slider in an own unique container:
您最好将滑块包装在自己独特的容器中：
<div class="sliderparent">
<div class="flexslider">
<ul class="slides">
</ul>
</div>
</div>
回答by Friendly Code
I tried the most popular answer here but seemed to get stuck in an endless loop. I instead force change the flex-viewport height and slide width on browser resize which seems to have done the trick.
我在这里尝试了最受欢迎的答案，但似乎陷入了无限循环。我改为在浏览器调整大小时强制更改 flex-viewport 高度和幻灯片宽度，这似乎已经完成了。
$(window).on('resize', function () {
if ($('.flexslider').length > 0) {
$('.flexslider').each(function () {
$(this).find('.flex-viewport').css('height', 'auto');
$(this).find('>.slides').each(function () {
let height = $(this).css('height');
$(this).find('> li').css('width', height);
});
});
}
});
回答by Luca Di Lenardo
$(window).load(function(){
var mainslider;
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
mainslider = slider;
}
});
//force resize (carousel mode)
$(window).on("resize", function() {
//carousel resize code, around line 569 of query.flexslider.js
mainslider.update( mainslider.pagingCount);
mainslider.newSlides.width(mainslider.computedW);
mainslider.setProps(mainslider.computedW, "setTotal");
});
});
I'm not sure this one will work for all cases, but for a simple carousel this works!
我不确定这是否适用于所有情况，但对于简单的轮播，这是有效的！
