4

可変幅サイトの製品カルーセルとして flexslider をセットアップしました。ブラウザ ウィンドウを一定の幅まで開くと、商品アイテムが消える場合があります。以下の詳細:

開発サイト / デモ

「人気商品」というセンターボックスについてです。テストしたすべてのブラウザー (FF、IE、Chrome、Safari) で、私が経験している問題を再現する方法は次のとおりです。

  1. 4 つまたは 5 つの項目だけが表示されるまで、ブラウザー ウィンドウを閉じます。
  2. 最後の製品が表示されるまで右矢印をクリックします (現在、プロメイトの黒いスリーブです)。
  3. ここで、ブラウザ ウィンドウのサイズを大きくすると、特定の時点で商品が消えます。再び小さくすると、再び現れます。

参考になるかもしれないメモ:

  • カルーセルの最後のアイテムではない場合、サイズを変更すると正常に機能し、必要に応じて伸縮します

  • ブラウザの幅が広く、最大 6 個の製品が表示されていて、カルーセルの最後の項目に移動してから、サイズを小さくしたり大きくしたりしても問題なく動作します (したがって、カルーセルが小さいときに最後の項目に移動したときにのみ壊れます)幅が大きくなり、大きくなります）

  • スライダー構成では、minItems を 4、maxItems を 6 に設定しました。

  • flexslider のすべてのデモは画像のみです...私が持っているように、それを使用して各アイテム内に html を表示する人を見たことがありません。また、これを許可するように設計されているかどうかもわかりません。うまくいけば、他の人も html/multi-items insde flexslider を実行している場合、これは彼らが見たことのあるものであるか、解決した場合に役立つ可能性があります。

ご協力ありがとうございます

4

2 に答える 2

2

Lauren の修正は詳細かつ完全ですが (非推奨の $.broswer を除いて)、サイズ変更時にカルーセルをスライド 0 にリセットするだけで、レスポンシブ デザインではシンプルかつエレガントであることがわかりました。テストのため、サイトを構築するときにサイズ変更イベントに注目するのは簡単ですが、現実の世界では、ページを見ながらブラウザのサイズを常に変更しているわけではなく、非常に小さなエッジ ケースです。これが私の解決策です：

$(window).bind("resize", function(){
    $('#flexslider').flexslider(0);
});
于 2015-06-08T16:39:52.133 に答える
1

これは、最新の Chrome、Safari、Firefox、および IE で動作するようですが、面倒です (主に、Chrome、Safari、および Firefox で動作するようになり、IE9 ではまだ要素が消えていることに気付いたためです)。

/*
 * Flexslider BUG FIX:
 *   Summary: on window resize, ensure team scrollbar members are all visible
 *   Dependency: Flexslider v2.1 and its dependencies
 */
$(window).bind("resize", function(){
    //doesnt work well in IEs, so detect these browsers
    //var isIE9 = ($.browser.version == "9.0") && ($.browser.msie == true);
    var isIE = $.browser.msie == true;
    var tmpCurrentItem = $('#team').flexslider().data().flexslider.currentItem;
    // if current item isnt the 1st one, then resizing may mean that images will disappear
    if (tmpCurrentItem != 0) {
       // sometimes passing a number into flexslider doesn't work and returns nothing
       // in these instances, move to 0

       //if NOT IE
       if (isIE != true) {
         var tmpFlexValue = $('#team').flexslider(tmpCurrentItem);
         if (tmpFlexValue == undefined) {
            $('#team').flexslider(0);
         }
       }

       var tmpCurrentSlide = $('#team').flexslider().data().flexslider.currentSlide;
       var tmpPages = $('#team').flexslider().data().flexslider.pagingCount;

       //if IE
       //slide number (not item number) should ALWAYS be less than paging Count
       //otherwise, it needs to be reset to 0
       if (isIE == true){
          if (tmpCurrentSlide >= tmpPages) {
                $('#team').flexslider(0); //this triggers another resize event
           }
       }
    }
});
/* end flexslider bug fix
*/
于 2013-01-08T18:45:23.467 に答える