画廊网格滑块响应式等高框

Gallery Grid Slider Responsive with equal height box

本文关键字：高框 响应 网格      更新时间：2023-09-26

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

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

宽 550 像素，低于 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/

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

相关文章：