0

同じ高さのボックスで応答するギャラリー グリッド スライダーを作成したいと考えています。

例 幅 650px 以上 3 列 2 行。

幅 550px、2 列 3 行以下。

幅 450 ピクセル、1 列 1 行以下。

今のところ、この jQuery プラグインhttps://github.com/liabru/jquery-match-heightを使用しています。

これを他のプラグイン スライダーで使用できますか、それとも別の代替手段がありますか?

(function() {
     /* matchHeight example */
    $(function() {
     // apply your matchHeight on DOM ready (they will be automatically re-applied on load or resize)
     var byRow = $('.item-wrapper').hasClass('match-rows');
    // apply matchHeight to each item container's items
    $('.item-container').each(function() {
        $(this).children('.item-query').matchHeight({
             byRow: byRow
        });
        });
    });
})();

https://jsfiddle.net/76cx7roy/

4

1 に答える 1

0

ここ: bxslider を使用しました。しかし、問題は2列3行を1列1行に変更しても反応しません。ロードされている場合にのみ機能します。

(function() {
         /* matchHeight example */
        $(function() {
         // apply your matchHeight on DOM ready (they will be automatically re-applied on load or resize)
         var byRow = $('.item-wrapper').hasClass('match-rows');
        // apply matchHeight to each item container's items
        $('.item-container').each(function() {
            $(this).children('.item-query').matchHeight({
                 byRow: byRow
            });
            });
      if($(window).width() > 450 && !$(".bx-s").length){
        var divs = jQuery(".item-container .item-query");
          for(var i = 0; i < divs.length; i+=6) {
            divs.slice(i, i+6).wrapAll("<div class='bx-s'></div>");
          }
      }else{
            $(".bx-s .item-query").unwrap();
      }
      $('.item-container').bxSlider({
          nextSelector: '#item-nav-right',
          prevSelector: '#item-nav-left',
          pager: false,
          nextText: 'next',
          prevText: 'prev'
        });
        });
    })();

https://jsfiddle.net/k55y6c9h/

于 2016-01-19T22:47:42.363 に答える