web-dev-qa-db-ja.com

ウィンドウサイズ変更時のFlexSlider2のサイズ変更

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

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

ありがとう！

javascriptjquerycsstwitter-bootstrapresponsive-design
15
And Finally

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

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

これらのソリューションをいくつか組み合わせ、スライダーが最初にページに存在することを確認するためのチェックも追加しました。

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

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

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

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

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

});
3
Natacha Beaugeais

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

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

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

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

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

誰かがまだ "flexsliderはより高い幅にサイズ変更されますが、より低くはなりません"問題が発生する場合に備えて、さらに別の選択肢を追加したかっただけです

ユーザー「PCandtheWeb」は、ラッピングテーブルがある場合に備えて、以下を追加することを提案しました。これにより、作業が完了したように見えます。

.your-table
{
   table-layout: fixed
}

ソース： https://github.com/woothemes/FlexSlider/issues/98

1
Tiago Duarte

私も多くの方法を試しましたが、実際に機能する場所はありません...その後、手動で実行しましたが、現在は機能しています：ウィンドウのサイズが変更されているときに、flexsliderによって変更される前にスライダーデータを保存します：destroy 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>
1
chakmear
$(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");
    });
});

これがすべての場合に機能するかどうかはわかりませんが、単純なカルーセルの場合は機能します。

0
Luca Di Lenardo

ここで最も人気のある答えを試しましたが、無限ループに陥っているようでした。代わりに、ブラウザのサイズ変更時にフレックスビューポートの高さとスライドの幅を強制的に変更しました。これでうまくいったようです。

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

            });
        }
    });
0
Friendly Code