FlexSlider 2調整窗口大小調整大小

Question

我爲構建在Twitter Bootstrap上的WordPress做出了響應式主題。我在主頁上使用了FlexSlider幻燈片jquery插件。

不幸的是，當我調整瀏覽器的大小時，FlexSlider不能正常調整大小。當我變窄時，圖像很容易被剪掉。如果我走得更寬一些，下一張圖像的一部分會出現在側面。即使使用FlexSlider網站的演示代碼，也會發生這種情況。它甚至發生在FlexSlider演示中。但是Dany Duchaine的[Energized theme] [3]設法在視口變化時很好地調整FlexSlider的大小。任何人都可以解釋他是如何做的，或者建議我可以改進我的版本的行爲？

謝謝！

Answer 1

你可能有一個解決方案或已經在這個階段繼續前進，但我想我會指出這個問題在github訪問者：https://github.com/woothemes/FlexSlider/issues/391（note patbouche的答案）。這個解決方案爲我工作。我把它放在after:的回調中。

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

Answer 2

我覺得這是更好地把它放到以前回調：

$('.flexslider').flexslider({ 
    // your settings 
    before: function(slider){ 
     $('.flexslider').resize(); 
    } 
}); 

Answer 3

我不得不綁定窗口，以得到這個工作可靠地調整大小事件。 由於FlexSlider 和之前之後回調並沒有爲我工作：

$(window).bind('resize', function() { 

setTimeout(function(){ 
    var slider = $('#banner').data('flexslider'); 
    slider.resize(); 
}, 1000); 

}); 

Answer 4

我試過很多方法，那麼我這樣做

if(jQuery('.iframe').length){ 
    var interval = window.setInterval(function() { jQuery('.flexslider').resize(); }, 100); 

    window.setTimeout(function(){ 
     clearInterval(interval); 
    },4000); 
} 

Answer 5

我聯合幾個這樣的解決方案，也添加一個檢查以確保滑塊首先存在於頁面上。

$(function() { 
    var resizeEnd; 
    $(window).on('resize', function() { 
     clearTimeout(resizeEnd); 
     resizeEnd = setTimeout(function() { 
      flexsliderResize(); 
     }, 250); 
    }); 
}); 

function flexsliderResize(){ 
    if ($('.flexslider').length > 0) { 
     $('.flexslider').data('flexslider').resize(); 
    } 
} 

Answer 6

只是想萬一有人添加另一種替代方案是仍遇到「flexslider調整大小以更高的寬度，但不會降低」問題

用戶「PCandtheWeb」建議增加以下的情況下，你有一個包裹臺上，這似乎把工作做好

.your-table 
{ 
    table-layout: fixed 
} 

來源： https://github.com/woothemes/FlexSlider/issues/980

Answer 7

$(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"); 
    }); 
}); 

我不確定這一個將適用於所有情況，但對於簡單的傳送帶這個作品！

Answer 8

我也嘗試了很多方法，但沒有任何地方真的在工作......然後我手動完成，現在它可以工作：當窗口調整大小時，通過flexslider更改之前保存滑塊數據：銷燬flexslider（https://stackoverflow.com/a/16334046/7334422）和完全刪除節點，手動添加保存在數據中的原始滑塊節點，再次添加並初始化flexslider ...因爲這非常昂貴我還添加了調整大小的方法（https://stackoverflow.com/a/40534918/7334422），以便在調整大小時不會執行...是的，它是一些代碼，這是一個有點哈克，但它的工作:)

$.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); 

你最好換你滑塊以自己獨特的容器：

<div class="sliderparent"> 
    <div class="flexslider"> 
     <ul class="slides"> 

     </ul> 
     </div> 
</div>