Question

我想用相同的高度框创建一个画廊网格滑块。

实施例 650px宽，3列以上，2行。

550px宽，低于2列和3行。

450px宽，低于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/

Gallery Grid Slider响应相同的高度框

1 个答案: