javascript - 画廊网格滑块响应等高框

Question

我想创建一个具有等高框响应的画廊网格滑块。

示例 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/

Answer 1

这里：我使用了 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/