FlexSlider 2在窗口大小resize时resize
我正在为Twitter Bootstrap上构建的WordPress制作一个响应主题。 我在主页上使用FlexSlider幻灯片jquery插件。
不幸的是，当我调整浏览器大小时，FlexSlider不会优雅地resize。 当我变窄时，图像很容易被裁掉……如果我变得更宽，下一张图像的一部分可能会出现在侧面。 即使我使用FlexSlider网站上的演示代码，也会发生这种情况。 它甚至发生在FlexSlider演示中。 但Dany Duchaine的[Energized theme] [3]设法在视口改变时很好地调整FlexSlider的大小。 任何人都可以解释他是如何做到这一点，或建议我可以改善我的版本的行为？
谢谢！
你可能有一个解决方案或已经在这个阶段继续前进，但我想我会在github上为访问者指出这个问题： https ： //github.com/woothemes/FlexSlider/issues/391 （注意patbouche的回答）。 这个解决方案对我有用。 我把它放在了after:回调。
var slider1 = $('#slider1').data('flexslider'); slider1.resize();
我结合了其中几个解决方案并添加了一个检查，以确保首先在页面上存在滑块。
$(function() { var resizeEnd; $(window).on('resize', function() { clearTimeout(resizeEnd); resizeEnd = setTimeout(function() { flexsliderResize(); }, 250); }); }); function flexsliderResize(){ if ($('.flexslider').length > 0) { $('.flexslider').data('flexslider').resize(); } }
我不得不绑定窗口resize事件，以使其可靠地工作。 由于回调之前和之后的FlexSlider对我不起作用：
$(window).bind('resize', function() { setTimeout(function(){ var slider = $('#banner').data('flexslider'); slider.resize(); }, 1000); });
我认为最好在回调之前把它放进去：
$('.flexslider').flexslider({ // your settings before: function(slider){ $('.flexslider').resize(); } });
我尝试了很多方式，然后我就这样做了
if( jQuery('.iframe').length ){ var interval = window.setInterval(function() { jQuery('.flexslider').resize(); }, 100); window.setTimeout(function(){ clearInterval(interval); },4000); }
只是想添加另一个替代方案，以防有人仍然遇到“flexslider调整到更高的宽度，但不是更低”的问题
用户“PCandtheWeb”建议添加以下内容，以防您有一个包装表，这似乎可以完成工作
.your-table { table-layout: fixed }
来源： https ： //github.com/woothemes/FlexSlider/issues/980
$(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"); }); });
我不确定这个会适用于所有情况，但对于一个简单的旋转木马，这是有效的！
我也尝试了很多方法，但没有一个真正有效…然后我手动完成它现在可以正常工作：当窗口resize时，在flexslider更改之前保存滑块数据：destroy flexslider（ https://stackoverflow.com / a / 16334046/7334422 ）并完全删除节点，手动添加保存在数据中的原始滑块节点，再次添加并初始化flexslider …因为这非常昂贵我还添加了一个resize的方法（ https：// stackoverflow。 com / a / 40534918/7334422 ），为了在resize时不执行…是的，这是一些代码，它有点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);
您最好将滑块包装在一个自己独特的容器中：