javascript - ウィンドウのサイズ変更時のFlexSlider 2のサイズ変更

Question

Twitter Bootstrap で構築された WordPress のレスポンシブテーマを作成しています。ホームページでFlexSliderスライドショー jquery プラグインを使用しています。

残念ながら、ブラウザのサイズを変更すると、FlexSlider は適切にサイズ変更されません。狭くすると画像が切れやすくなります. 広くすると次の画像の一部が横に見えます. これは、FlexSlider Web サイトのデモコードを使用しても発生します。FlexSlider デモでも発生します。しかし、Dany Duchaine の [Energized theme][3] は、ビューポートの変更に合わせて FlexSlider のサイズをうまく変更できます。彼がどのようにそれを行っているかを説明したり、私のバージョンの動作を改善する方法を提案したりできますか?

ありがとう！

score 17 · Accepted Answer

あなたはおそらく解決策を持っているか、この段階で進んでいますが、私は訪問者のためにgithubでこの問題を指摘すると思いました：https ：//github.com/woothemes/FlexSlider/issues/391 （patboucheの答えに注意してください）。この解決策は私のために働いた。コールバックに入れましたafter:。

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

score 4 · Accepted Answer

これらの解決策をいくつか組み合わせて、最初にスライダーがページに存在することを確認するチェックを追加しました.

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

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

score 3 · Accepted Answer

これを確実に機能させるには、ウィンドウのサイズ変更イベントをバインドする必要がありました。コールバックの前後のFlexSliderが機能しなかったため:

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

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

});

score 2 · Accepted Answer

コールバックの前に入れる方が良いと思います：

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

score 1 · Accepted Answer

私は多くの方法を試しました、そして私はこれをしました

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

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

score 0 · Accepted Answer

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

これがすべてのケースで機能するかどうかはわかりませんが、単純なカルーセルではこれが機能します!

javascript - ウィンドウのサイズ変更時のFlexSlider 2のサイズ変更

9 に答える 9

Related

Reference